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

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, вы можете отображать/скрывать эти поля, например.

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

Примечание: Для Вышеописанный способ быть полностью ненавязчивым вы можете динамически построить выбора-меню с именами всех различных fieldsets.

---

В качестве альтернативы вы можете префикс каждого поля имя многозначительно префиксом, а затем скрыть/показать в соответствии с этим атрибутом:

<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

Чтобы запустить код на нагрузку, просто добавьте .Кнопкой() , Как показано ниже ...

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

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

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

Answer 5

Мои 2 цента: мне нужно, чтобы показать/скрыть поля в зависимости от многих предыдущих выберите значение (не только один).

Так добавить родительский атрибут Див поля, как это:

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

}); 

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

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