Question

我正在尝试实现一个我发现的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

非常感谢

Answer 1

$(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。

Answer 2

添加一个表单onload事件并添加功能来隐藏这个onload函数中最初的所有内容，或者你可以使用.show（）方法代替使用.hide函数会自动为你执行此操作。

Answer 3

我已编辑了一些代码。

我为你创造了一个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();
  });
})

Jquery脚本根据表单选择值显示/隐藏内容

3 个答案: