1

我正在尝试实现一个我发现的 jquery 脚本，它可以根据表单中下拉字段的选择值来显示/隐藏内容。

它可以扩展，但我需要它做的是在页面加载时隐藏所有内容，并且仅显示取决于选择值的相关内容。目前它在页面加载时显示所有内容，然后在我选择一个值时按预期显示/隐藏内容。

如何在第一个实例中隐藏所有内容？

到目前为止，这是我通过测试得到的：

<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">
<p>a</p> 
</div>
<div id="view2a">
<p>b</p> 
</div>
<div id="view2b">
<p>c</p> 
</div>
<div id="view3">
<p>d</p> 
</div>

jQuery是：

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

这是测试页面的链接，因此您可以了解我的意思：

http://sitesforasnip.com/form/testform.html

非常感谢

4

3 回答 3

0 
$(document).ready(function() {
   $('#view1').hide();
   $('#view2a').hide();
   $('#view2b').hide();
   $('#view3').hide();

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

首先，您使用隐藏功能隐藏所有 div。

于 2013-05-30T11:06:19.343 回答
0

添加表单 onload 事件并添加功能以隐藏此 onload 函数中的所有初始内容，或者您​​可以使用 .show() 方法代替使用 .hide 函数将自动为您执行此操作。

于 2013-05-30T11:11:35.057 回答
0

我已经编辑了你的代码。

我为你创建了一个 jsfiddle。这会有所帮助。http://jsfiddle.net/gGRmR/

$(document).ready(function(){

    $('#view1').hide();
    $('#view2a').hide();
    $('#view2b').hide();
    $('#view3').hide();
$.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();
  });
})
于 2013-05-30T11:12:09.450 回答