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

Попробуйте что-то вроде этого:

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

Есть несколько способов сделать это. Самое простое – иметь несколько отдельных полей, каждый из которых содержит одну группу полей. Затем в 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> 

Мои 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 s2</option> <option value="s1_sub3">sub 3 of s3</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(); }); 

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

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

Чтобы запустить код при загрузке, просто добавьте .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(); }); 

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

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