Execute script based on which option is selected in a select box?

css-selectors, html-select, javascript, jquery

Solution

You didn't specify how the code was triggered, so here are two common ways:

$('#yourSelect').change(function() {
  if ($(this).val() == 'something') { 
     // do this
  }
  if ($(this).val() == 'somethingelse') { 
     // do that
  }
});

Note that while I used the onchange event for the select, an onclick for another element would look like this instead:

$('#somethingelse').click(function() {
  if ($('#yourselect').val() == 'something') { 
     // do this
  }
  if ($('#yourselect').val() == 'somethingelse') { 
     // do that
  }
});

Problem

I've got a select box where the user selects which elements they want to see based on option 1, option 2 and option 3. So what I'm trying to set up is have if option 1 is selected run one set of commands and if option 2 run another and so on. I guess I just need to know how to set up the jQuery selector.

Original source