根据选择值显示/隐藏字段

我试图显示和隐藏一些表单字段，具体取决于我的一个选择字段的值。 我希望使用数组来保存应该显示的内容和不应该为每个选择值显示的内容，以便从庞大的switch语句中保存，但无法弄清楚如何执行它。

我正在使用PHP和jQuery。 任何帮助都会很棒。

Answer 1

尝试这样的事情：

 -- Select a View -- view1 view2 view3  
  
 
  
 
  
 
   

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

Answer 2

有几种不同的方法可以做到这一点。 最简单的是有几个单独的字段集，每个字段集包含一组字段。 然后，在jQuery中，依赖于select-menu的值，您可以显示/隐藏这些字段集，例如

 
    
 
    
  Fieldset 1 Fieldset 2   

注意 ：要使上述技术完全不引人注意，您可能需要使用所有不同字段集的名称动态构建选择菜单。

---

或者，您可以使用有意义的前缀为每个字段名称添加前缀，然后根据该属性隐藏/显示：

       Group 1 Group 2   

Answer 3

我的2美分：我需要显示/隐藏字段，具体取决于许多以前的选择值（不仅仅是一个）。

所以我向div字段添加一个父属性，如下所示：

 
   -- Make a choice -- sub 1 sub 2 sub 3  
  
   -- Make a choice -- sub 1 of s1 sub 2 of s2 sub 3 of s3  
   
 You are inside s1 sub1  

现在jquery代码：

 $(document).ready(function() { $('select[class=selector]').change(function() { //next div to show var selectorActive = $(this).val(); //div where you are var parentValue = $(this).attr("id"); //show active div and hide others $('div').hide().filter('#' + selectorActive).show(); while (parentValue!="none") { //then show parents of active div $('div[id=' + parentValue + ']').show(); //return the parent of div until "none" parentValue = $('div[id=' + parentValue + ']').attr("parent"); } }); // print only the first div at start $('div').hide().filter("#view").show(); }); 

这就像一个魅力，你不需要定义地图

我希望这个能帮上忙

Answer 4

要在加载时启动代码，只需添加.change（）。 如下所示…

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

Answer 5

@Martin试试吧

 `$('#viewSelector').trigger('change');`