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

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

Jquery显示字段取决于选择菜单值但在页面加载时

2 个答案: