Mostra/nascondi i campi in base al valore selezionato

Question

Sto tentando di mostrare e nascondere alcuni campi modulo in base al valore di uno dei miei campi selezionati. Sto cercando di utilizzare gli array per contenere ciò che dovrebbe essere mostrato e ciò che non dovrebbe essere mostrato per ciascun valore selezionato, per salvarmi da un'enorme istruzione switch, ma non riesco a capire come farlo.

Sto usando PHP e jQuery. Qualsiasi aiuto sarebbe grande.

Answer 1

provare qualcosa di simile:

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

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

Ci sono alcuni modi diversi si potrebbe fare questo. Il più semplice è avere alcuni campi separati, ognuno contenente un singolo gruppo di campi. Quindi, in jQuery, dipende dal valore del menu di selezione che puoi mostrare/nascondere questi campi, ad es.

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

Nota: Per la tecnica di cui sopra per essere del tutto discreto si potrebbe desiderare di costruire dinamicamente il select-menu con i nomi di tutti i diversi fieldsets.

---

In alternativa è possibile far precedere ogni campi Nome con un prefisso significativo, e poi nascondere/mostrare in base a tale attributo:

<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

Per avviare il codice a carico, è sufficiente aggiungere .Per passare() . Come mostrato di seguito ...

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

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

Answer 5

I miei 2 centesimi: avevo bisogno per mostrare/nascondere campi in base a molti precedente valore di selezione (non una sola).

Così ho aggiungere un attributo padre a div campi come questo:

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

Ora il codice 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(); 

}); 

di che funziona come un fascino e non è necessario definire mappe

spero che questo vi aiuterà