Afficher/masquer des champs en fonction de sélectionner une valeur

Je suis en train d'afficher et de masquer un peu les champs du formulaire en fonction de la valeur de l'un de mes sélectionner les champs. Je suis à la recherche d'utiliser des tableaux pour tenir ce devrait être montré et ce qui ne doit pas être indiqué pour chaque sélectionnez la valeur, pour me sauver de massif, une instruction switch, mais ne peut pas comprendre comment le faire.

Je suis à l'aide de PHP et jQuery. Toute aide serait super.

OriginalL'auteur Udders | 2009-05-07

Essayer quelque chose comme cela:

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

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

Désolé pour le début du post, doigt a glissé sur le clavier. On dirait que je suis un downvote.
Si cette.hide(); être remplacé par $(this).hide();
J'ai testé et ça marche. Il suffit de noter, vous pouvez avoir besoin de masquer les points de vue/afficher la valeur par défaut.
pas de mes tests. ce que déjà l'ensemble de fractionnement de l'objet.
Qui fonctionne à merveille.. gotta love Jquerry, et ceux qui produisent les exemples de ce genre

OriginalL'auteur bendewey

Il existe quelques façons dont vous pourriez le faire. Le plus simple est d'avoir un peu de séparer les balises html fieldsets, chacun ne contenant qu'un seul groupe de champs. Puis, dans jQuery, dépend de l'sélectionnez menu de la valeur, vous pouvez afficher/masquer ces balises html fieldsets, par exemple

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

Note: Pour la technique ci-dessus pour être entièrement discrète vous pourriez générer dynamiquement le select menu avec les noms de toutes les différentes balises html fieldsets.

Alternativement, vous pouvez ajouter un préfixe de chaque champs nom d'un préfixe, puis masquer/afficher selon que l'attribut:

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

OriginalL'auteur James

Mes 2 cents :
J'ai besoin d'afficher/masquer des champs en fonction de nombreux précédente sélectionner la valeur (pas un seul).

J'ai donc ajouter un attribut parent à div champs comme ceci :

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

Maintenant le jquery code :

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

});

Qui fonctionne comme un charme et que vous n'avez pas besoin de définir des cartes

J'espère que cela aidera

OriginalL'auteur Gautier

À feu le code de la charge, il suffit d'ajouter .modifier(). Comme indiqué ci-dessous...

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

OriginalL'auteur

0

@Martin Essayer cette
```
`$('#viewSelector').trigger('change');`
```
OriginalL'auteur Jose

Vous devez vous connecter pour publier un commentaire.