Jquery 根据选择菜单值显示字段，但在页面加载时

Question

本题参考题Show/hide fields depending 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();
  });
});

当我选择菜单中的第二项时，它会显示相应的字段。

例外情况是当页面加载时选择菜单已经选择了第二个菜单项，该字段不显示。

您可能会说，我是 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());
  });
});

当然，如果您只是将选择器数据存储在 <option>..data-selectors="#view2a, #view2b" 的 HTML 中，您可能不需要 $.viewMap