I have in one form, one selects with one question that if determined value selected I need to display none the next question. How can I make a jquery code that detects that the user selected a determinated option in select and change the CSS of the page?

<select>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>

I have in one form, one selects with one question that if determined value selected I need to display none the next question. How can I make a jquery code that detects that the user selected a determinated option in select and change the CSS of the page?

<select>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>

• javascript
• jquery
• html
• css

• 5 Show what you've got and we'll see what you need/ might improve on – JamesS Commented Feb 1, 2019 at 10:43
• This might be of some use to you stackoverflow./questions/32325864/… – MattHamer5 Commented Feb 1, 2019 at 10:48
• @jamesS for now, i just have the form structure, i edited the question with an example. – Tiago P.C Commented Feb 1, 2019 at 10:52
• @Rizwan ive added a jsfiddle to my answer, hope this helps. – David Commented Feb 1, 2019 at 11:49

3 Answers 3

So as far as I understand with your short description you need to do something based on the value selected by user in select box which we call an event onchange.I am writing a code example for you

<select onchange="somefunction($(this).val())">
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 </select>

<script>
  function somefunction(value){
     if(value == 1){
      $("body").css("background-color","red");
     }
     if(value == 2){
       $("body").css("background-color","yellow");
     }
  }
   </script>

Your question is a bit vague, but i think this is what your after:

 const value = $('#selectID option[value=""]').prop("selected", true);

 if (value....") {
     // do css stuff
 }

Additionally you can get the value / text like so:

<select id="car_manufacturer">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>

<script>
   const element = document.getElementById("car_manufacturer");
   const value = element.options[element.selectedIndex].value;
   const text = element.options[element.selectedIndex].text;
 </script>

You could extend on the above with a on onchange event on the select element.

<select id="car_manufacturer" onchange="selectManufacturer(this)">

Manipulate CSS:

JavaScript:

document.body.style.backgroundColor = "red";

jQuery:

$("body").css("background-color","red");

Fiddle

onchange example with css manipulation:

http://jsfiddle/9L0czmeq/

Pure css solution would be something like this:

.container:has(select[name="name"] option[value="value"]:checked) .selector-in-container {background:blue}

Or specifically something next to the select:

select[name="name"]:has(option[value="value"]:checked) + .element-after-select {background:blue}

Should work reliably across all Browsers.