Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

303
Views
Select option change css

how can I change the css of another element when I click any option in the select option Note : The data comes from the database into the select option

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

You can do that in javascript,

const yourSelector = document.getElementById('yourSelector');
yourSelector.addEventListener('change', () => 
   document.querySelector(yourAwesomeElement).style..... // whatever you want
)

this code will change the css of another element when you will click on any option of the selector.

about 4 years ago · Juan Pablo Isaza Report

0

My suggestion is below: value="@item.QuestionTypeId" that I set as 1,2,3,4

<select name="Questions2TypeId" id="questtype">
    <option selected="selected" disabled>-- Select --</option>
    @foreach (var item in ViewBag.questtype)
    { <option value="@item.QuestionTypeId">@item.QuestionOpenorClose</option> }
</select>
<p >Click to see the effect.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#questtype').change(function() { //change click to change color
   
  if ( $("option:selected", this).is(':selected')) { //check which option is selected
 
    var optionValue = $("option:selected").attr('value');
    if(optionValue == 1) {
       
        $('p').attr('style','color:blue;')
    }
   if(optionValue == 2) {
     
        $('p').attr('style','color:red;')
    }
    if(optionValue == 3) {
   
        $('p').attr('style','color:pink;')
    }
    if(optionValue == 4) {
   
        $('p').attr('style','color:green;')
    }
  }
 
})
</script>

Result:

enter image description here

[Note] You can refer to: .addClass() .removeClass()to use $( "p" ).addClass( );or $( "p" ).removeClass( ) according to your class set in style.

about 4 years ago · Juan Pablo Isaza Report

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
    <option value="item0">--Select an Item--</option>
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!