Question

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

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

Answer 1

尝试这样的事情：

<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>

然后在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 id="f1">
    <input name="something1" />
    <input name="something2" />
    <input name="something3" />
</fieldset>
<fieldset id="f2">
    <input name="something4" />
    <input name="something5" />
    <input name="something6" />
</fieldset>
<select name="fieldset-choice">
    <option value="f1">Fieldset 1</option>
    <option value="f2">Fieldset 2</option>
</select>

<script type="text/javascript">
    jQuery('select[name=fieldset-choice]').change(function(){
        var fieldsetName = $(this).val();
        $('fieldset').hide().filter('#' + fieldsetName).show();
    });

    // We need to hide all fieldsets except the first:
    $('fieldset').hide().filter('#f1').show();
</script>

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

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

<input name="group1-name1" />
<input name="group1-name2" />

<input name="group2-name3" />
<input name="group2-name4" />
<input name="group2-name5" />

<select name="field-choice">
    <option value="group1">Group 1</option>
    <option value="group2">Group 2</option>
</select>

<script type="text/javascript">
    jQuery('select[name=field-choice]').change(function(){
        var groupName = $(this).val();
        $('input').hide().filter('[name^=' + groupName + ']').show();
    });

    // We need to hide all fields except those of the first group:
    $('input').hide().filter('[name^=group1]').show();
</script>

Answer 3

要在加载时启动代码，只需添加.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 4

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

所以我将div属性的父属性添加到这样：

<div id="view" parent="none">
<select class=selector id="view">
<option value="0"> -- Make a choice --</option>
<option value="s1">sub 1</option>
<option value="s2">sub 2</option>
<option value="s3">sub 3</option>
</select>
</div>

<!-- you need to define the parent value with the value of parent div id -->
<div id="s1" parent="view">
<!-- if you want to have a selector be sure it has the same id as the div -->
<select class=selector id="s1">
<option value="0">-- Make a choice --</option>
<option value="s1_sub1">sub 1 of s1</option>
<option value="s1_sub2">sub 2 of s1</option>
<option value="s1_sub3">sub 3 of s1</option>
</select>
</div>

<!-- Make the same thing for s2 and s3
Define div s2 here

Define div s3 here
-->

<!-- and finally if that's your final step you put what you want in the div -->
<div id="s1_sub1" parent="s1">
You are inside s1 sub1
</div>

现在是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 5

@Martin试试这个

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

Answer 6

这是一个非常简单的示例：

目的是显示一个简单示例，说明如何使用值数组来显示/隐藏select的值。

在此演示中，我可以使用className一次显示/隐藏所有字段组-但这不是示例的目的-因此使用了classNames仅适用于CSS。

由于该演示使用ID （具有两个ID数组），因此要隐藏的字段是否为input字段，{{1} }，divs或您拥有什么。该ID标识要隐藏的任何内容。

imgs

var aPeople = ['bob','sam','ted'];
var aTransport = ['car','bike','truck'];

$('#mySel').change(function(){
   $('.alldiv').hide(); //Hide them all to start...
   let sel = $(this).val(); //Get selected option value
   if ( sel=='ppl' ){
      for (let i=0; i<aPeople.length;i++){
         $('#' + aPeople[i]).show();
      }
   }else if ( sel=='tpt' ){
      for (let i=0; i<aTransport.length;i++){
         $('#' + aTransport[i]).show();
      }
   }else{
      //Choose selected
      $('.alldiv').show();
   }
});

.alldiv{width:30vw;height:10vh;padding:2vh 2vw;text-align:center;}
.ppl{background:palegreen;}
.tpt{background:wheat;}

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

6 个答案:

这是一个非常简单的示例：