jQuery conditional statement to check if a select option has either of 4 values selected I am working on this project that has a reservation form which allow users specify which sort of service they require. I have a select menu with eight (8) options and I have two divs which would either show/hide depending on the value of the option been selected. Seen below is the select element:

&lt;select name="serviceChoice" id="serviceChoice"&gt;
  &lt;option value="A"&gt;Option A&lt;/option&gt;
  &lt;option value="B"&gt;Option B&lt;/option&gt;
  &lt;option value="C" selected="selected"&gt;Option C&lt;/option&gt;
  &lt;option value="D"&gt;Option D&lt;/option&gt;
  &lt;option value="E"&gt;Option E&lt;/option&gt;
  &lt;option value="F"&gt;Option F&lt;/option&gt;
&lt;/select&gt;

&lt;div id="field_1" class="optionBox"&gt;I have several form fields&lt;/div&gt;
&lt;div id="field_2" class="optionBox"&gt;I have several form fields&lt;/div&gt;


I have written my jQuery code to alternate between these divs, however I would like to know if there is a shorter better way to get this done. I would also like to clear the values of any input elements in a div which has been hidden due to the choice of the user. My code is as follows:

(function($){
    $('#field_1').show();
    $('select[name=serviceChoice]').change(function(){
        if( $('select[name=serviceChoice] option:selected').val() == 'A' ) {
            $('.optionBox').hide();
            $('#dropOff').show();
        } else if ( $('select[name=serviceChoice] option:selected').val() == 'B' ) {
            $('.optionBox').hide();
            $('#pickUp').show();
        } else if ( $('select[name=serviceChoice] option:selected').val() == 'C' ) {
            $('.optionBox').hide();
            $('#pickUp').show();
        } else if ( $('select[name=serviceChoice] option:selected').val() == 'D' ) {
            $('.optionBox').hide();
            $('#pickUp').show();
        } else {
            $('.optionBox').show();
        }
    });
})(jQuery);
// You can use the document.ready as both encapsulation as well as
// to make sure the DOM is ready for operation.
$(function ($) {

  // Unless these are dynamic (the set could change), it's better to cache them
  var optionBox = $('.optionBox');
  var dropOff = $('#dropOff');
  var pickUp = $('#pickUp');
  var field1 = $('#field_1');

  field.show();

  // Your select box has an ID. They are faster than attribute selectors 
  // in both parsing ase well as fetching from the DOM
  $('#serviceChoice').change(function () {

    // The current context of this function is the DOM element, which is the select
    // You can use it to get the value, rather than using a selector again. Removes
    // the need for jQuery to parse the selector and look for it in the DOM
    switch ($(this).val()) {
    case 'A':
      optionBox.hide();
      dropOff.show();
      break;
    case 'B':
    case 'C':
    case 'D':
      optionBox.hide();
      pickUp.show();
      break;
    default:
      optionBox.show();
    }
  });
});


Minus the comments, here's what you get:

$(function ($) {

  var optionBox = $('.optionBox');
  var dropOff = $('#dropOff');
  var pickUp = $('#pickUp');
  var field1 = $('#field_1');

  field.show();

  $('#serviceChoice').change(function () {

    switch ($(this).val()) {
    case 'A':
      optionBox.hide();
      dropOff.show();
      break;
    case 'B':
    case 'C':
    case 'D':
      optionBox.hide();
      pickUp.show();
      break;
    default:
      optionBox.show()
    }
  })
});