Jquery Show Fields в зависимости от значения меню выбора, но при загрузке страницы

Question

Этот вопрос относится к вопросу Показать / скрыть поля в зависимости от выбранного значения

<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();
  });
});

Когда я выбираю второй пункт в меню, отображается соответствующее поле.

Исключением является случай, когда на странице загрузки меню выбора уже выбран второй пункт меню, поле не отображается.

Как вы можете сказать, я новичок в jquery иможет определенно использовать некоторую помощь в настройке этого кода, чтобы поле выбранного элемента отображалось при загрузке страницы.

Спасибо,

Тим

Answer 1

В этом случае проще всего просто запустить обработчик change, который у вас уже есть / нужен, например:

$('#viewSelector').change(function() {
  $.each($.viewMap, function() { this.hide(); });
  $.viewMap[$(this).val()].show();
}).change(); //only change to your code!

Это просто вызывает событие change на том же селекторе сразу после его привязки, поэтому оно происходит на document.ready (где вы привязываете), а также при его изменении. .change() без аргументов эквивалентно .trigger('change').

Answer 2

Переместить код в функцию и вызвать его также как onload -

 $(document).ready(function() {

  function toggleDivs(val) {
        $.each($.viewMap, function() { this.hide(); });
        $.viewMap[val].show();
  }

  toggleDivs($('#viewSelector').val());

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

  $('#viewSelector').change(function() {
    toggleDivs($(this).val());
  });
});

Конечно, вам, вероятно, не понадобится $.viewMap, если вы просто сохранили данные селектора в HTML-коде <option> .. data-selectors="#view2a, #view2b"