2009-05-07 29 views
13

Estoy tratando de mostrar y ocultar algunos campos de formulario dependiendo del valor de uno de mis campos de selección. Estoy buscando utilizar matrices para contener lo que se debe mostrar y lo que no se debe mostrar para cada valor de selección, para salvarme de una declaración de conmutación masiva, pero no puedo encontrar la manera de hacerlo.Mostrar/ocultar campos según el valor seleccionado

Estoy usando PHP y jQuery. Cualquier ayuda sería genial.

Respuesta

32

intentar algo como esto:

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

continuación, en el 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(); 
    }); 
}); 
+0

Lo siento por la publicación anterior, el dedo se deslizó en el teclado. Parece que obtuve un voto negativo por eso. – bendewey

+0

Debe this.hide(); ser reemplazado por $ (this) .hide(); –

+0

He probado esto y funciona. Solo tenga en cuenta que es posible que necesite ocultar inicialmente las vistas/mostrar el valor predeterminado. – bendewey

5

Hay algunas maneras diferentes que usted puede hacer esto. Lo más simple es tener unos pocos conjuntos de campo separados, cada uno con un solo grupo de campos. Luego, en jQuery, dependiendo del valor del menú de selección, puede mostrar u ocultar estos conjuntos de campo, p.

<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: Para la técnica anterior para ser totalmente discreta es posible que desee crear dinámicamente el selecto menú con los nombres de todos los conjuntos de campos diferentes.


alternativa, se puede prefijar cada campos de nombre con un prefijo significativo, y luego ocultar/mostrar acuerdo con ese atributo:

<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

para encender el código de la carga, sólo tiene que añadir .Cambiar() . Como se muestra a continuación ...

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

@ Martin probar este

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

Mis 2 centavos: que necesitaba para mostrar/ocultar campos en función de muchos valoran selecto anterior (no sólo uno).

Así que añadir un atributo primario a DIV campos como este:

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

Ahora el código 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(); 

}); 

de que funciona como un encanto y que no es necesario definir mapas

Espero que esto ayude

Cuestiones relacionadas