jQuery afficher/masquer les éléments par champ de sélection

Question

J'ai un champ de sélection qui montre différents éléments de mon formulaire en fonction de la valeur sélectionnée, j'ai trois "classes" qui montrent chacune les parties requises du fichier. J'ai actuellement les sélections liées à un .click() et cela fonctionne bien sauf que si je veux charger la page avec la valeur présélectionnée, elle n'affichera pas les parties requises du formulaire parce que le champ de sélection n'a pas été réellement cliqué. J'ai regardé autour de moi et je ne vois pas d'événement qui me permettrait d'afficher des informations basées sur la valeur sélectionnée, mais je ne suis pas un expert alors peut-être que je ne comprends pas certaines fonctions.

Voici la partie pertinente de mon HTML:

<select name="class"> 
    <option value="vehicle" selected="selected">vehicle</option> 
    <option value="part">Part</option> 
    <option value="project">Project</option> 
    <option value="vehicle">Vehicle</option> 
</select><br /> 
<etc...> 

Et mon switcher en cours jQuery:

$("select option[value='project']").click(function() { 
     $('div.part-show').show().hide(); 
     $('div.both-show').hide().show(); 
     $('div.vehicle-show').hide().show(); 
    }); 

Merci beaucoup!

Answer 1

J'ai eu un problème similaire et ce que je l'ai fait pour le faire fonctionner est que je décocha un événement de clic (ou un événement select dans mon cas) sur l'objet que je voulais présélectionné.

Alors ... dans votre code jQuery procédez comme suit une fois que vous avez configuré votre fonction de changement:

$('select option:first').click(); 

Cela devrait tirer votre événement et se cacher/montrer tout de suite.

Une autre option qui fonctionne bien est de commencer avec certains fichiers HTML affichés et masqués en fonction de la valeur par défaut sélectionnée (il suffit de le coder dans le code HTML). Cela fonctionne si vous voulez avoir une valeur statique par défaut sélectionnée (AKA, ce n'est pas dynamique basé sur d'autres entrées de l'utilisateur).

Answer 2

Vous devez utiliser l'événement change() pour la balise de sélection.

$("select").change(function() { 
    if ($("select").val() == "project") { 
    $('div.part-show').show().hide(); 
    $('div.both-show').hide().show(); 
    $('div.vehicle-show').hide().show(); 
    } 
});