Question

I am wondering how to fire an event in jQuery based on a specific select value. So, for example i have a small select and div like so:

<select id="sweets">
  <option value ="Option1">Option 1</option>
  <option value ="Option2">Option 2</option>
  <option value ="Option3">Option 3</option>
</select>
<div id='showthis'>You have selected option 2</div>

I want to do something like;

if the user select Option 2,

$('#showthis').show();

if the user selects any other option,

$('#showthis').hide();

I am fairly new to jQuery and i’m not sure how to do a change event based on a specic select value.
Any help would be greatly appreciated.

Answer 1

$('#sweets').change(function(){
    var show = $(this).val() == 'Option2';
    $('#showthis').toggle(show);
});