Jquery Show Fields depending on Select Menu value but on page load

Posted by Tim on Stack Overflow See other posts from Stack Overflow or by Tim
Published on 2010-04-23T10:26:44Z Indexed on 2010/04/23 10:33 UTC
Read the original article Hit count: 290

Filed under:
|
|

Hello,

This question refers to the question http://stackoverflow.com/questions/835259/jquery-show-hide-fields-depening-on-select-value

<select id="viewSelector">
   <option value="0">-- Select a View --</option>       
   <option value="view1">view1</option>
   <option value="view2">view2</option>
   <option value="view3">view3</option>
</select>

<div id="view1">
  <!-- content --> 
</div>
<div id="view2a">
  <!-- content --> 
</div>
<div id="view2b">
  <!-- content --> 
</div>
<div id="view3">
  <!-- content --> 
</div>



$(document).ready(function() {
  $.viewMap = {
    '0' : $([]),
    'view1' : $('#view1'),
    'view2' : $('#view2a, #view2b'),
    'view3' : $('#view3')
  };

  $('#viewSelector').change(function() {
    // hide all
    $.each($.viewMap, function() { this.hide(); });
    // show current
    $.viewMap[$(this).val()].show();
  });
});

When I select the 2nd item in the menu it shows the corresponding field.

The exception to this is when the on page load the select menu already has the 2nd menu item selected, the field does not show.

As you may be able to tell, I am new to jquery and could definetly use some help with adjusting this code so that the selected item's field is shown on page load.

Thanks,

Tim

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about select