Показать/скрыть поля в зависимости от значения выбора

Я пытаюсь показать и скрыть несколько полей формы в зависимости от значения одного из моих полей выбора. Я хочу использовать массивы для хранения того, что должно быть показано, и что не следует показывать для каждого значения выбора, чтобы избавить меня от массивного оператора switch, но не могу понять, как это сделать.

Я использую PHP и jQuery. Любая помощь будет отличной.

ОТВЕТЫ

Ответ 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();
  });
});

Ответ 2

Есть несколько способов сделать это. Самое простое - иметь несколько отдельных полей, каждый из которых содержит одну группу полей. Затем в jQuery, в зависимости от значения меню выбора, вы можете отображать/скрывать эти поля, например.

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

Ответ 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();
});

Ответ 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 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();

});

Это работает как шарм, и вам не нужно определять карты

Я надеюсь, это поможет

Ответ 5

@Martin Попробуйте это

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

Ответ 6

Вот очень простой пример:

Цель состоит в том, чтобы показать ПРОСТОЙ ПРИМЕР того, как использовать массив значений для отображения/скрытия полей в зависимости от значения выбора.

В этой демонстрации я мог бы использовать classNames для одновременного отображения/скрытия группы полей - но это не является целью примера - поэтому classNames использовались только для CSS.

Поскольку пример использует идентификаторы (с двумя массивами этих идентификаторов) для демонстрации, это не имеет значения полей, которые будут скрыты, являются ли input поля, divs, 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();
   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;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select id="mySel">
  <option value="">Choose:</option>
  <option value="ppl">People</option>
  <option value="tpt">Vehicles</option>
</select>

<div id="bob" class="alldiv ppl">People: Bob</div>
<div id="car" class="alldiv tpt">Vehicle: Car</div>
<div id="truck" class="alldiv tpt">Vehicle: Truck</div>
<div id="sam" class="alldiv ppl">People: Sam</div>
<div id="ted" class="alldiv ppl">People: Ted</div>
<div id="bike" class="alldiv tpt">Vehicle: Bike</div>