仅当从列表中选择特定项目时，如何使div出现

Question

I got this code:

<form>
<select name="lelel">
  <option value="x">x</option>
  <option value="xx">xx</option>
  <option value="xxx">xxx</option>
</select>
</form>
<div id="divid">
  LALALALALA
</div>

And my question is, can i make the div "divid" be invisible and then when the user selects the option xxx the div will appear.

Answer 1

 $('[name=lelel]').change(function(){ if ( this.value == 'xxx') { $('#divid').show(); }else{ $('#divid').hide(); } }); 

 #divid {display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form> <select name="lelel"> <option value="x">x</option> <option value="xx">xx</option> <option value="xxx">xxx</option> </select> </form> <div id="divid"> LALALALALA </div> 

Answer 2

If you were going to have several divs that appear/disappear based on user selection you could do the follow with the JS code expanding on gibberish's answer

$('select').change(function(){
  var chosen_one = $(this).value();
  $('.toShow').hide();
  $('#'+chosen_one).show();
})

You can then give all the divs that will be shown/hidden a class of toShow and set them as display: none; in the CSS. Then as you add more options/divs you don't have to modify your JS or CSS