jQuery: Conditionnel afficher un élément basé sur la zone de liste déroulante de sélection

J'ai deux listes déroulantes, dans lequel le contenu dans la deuxième liste déroulante dépend de la sélection effectuée dans la première. Par exemple, dans le code HTML suivant, vous aurez le choix de la méthode d'application de la première. Si vous choisissez Aérienne comme la méthode d'application, alors vous allez répondre à la question aériennes taille dist. Sinon, vous devez répondre de pulvérisation au sol type.

Donc, une fois que la page est chargée, les deux deuxième niveau de listes déroulantes (aérien taille dist., et de pulvérisation au sol de type.) sont cachés. Ils apparaissent uniquement lorsque le choix est fait dans le premier (méthode d'application).

Je suis en mesure de réaliser cette fonction en jQuery (en dessous de jQuery). Mais mon approche est assez stupide. Ma question est:

Est-il un moyen de sélectionner toute la ligne, sans l'aide de comptage de sa séquence (nth-child())? Puis-je choisir l'ensemble de la ligne, basé sur la sélection d'un ID d'élément ? Par exemple, je peux d'abord sélectionner $('#id_A') et puis développez ma sélection pour l'ensemble de la ligne?
Est-il une meilleure façon (une boucle?) pour atteindre cet masquer ou afficher la fonctionnalité plutôt que de comparer tous les choix possibles (($(this).val() == "X") )?

Merci!

Voici le code HTML, et le formulaire est généré par Django:

<div class="articles">
    <form method="GET" action=_output.html>
        <table align="center">
<tr><th><label for="id_application_method">Application method:</label></th><td><select  name="application_method" id="id_application_method">
<option value="">Pick first</option>
<option value="A">Aerial</option>
<option value="B">Ground</option>
</select></td></tr>

<tr><th><label for="id_A">Aerial Size Dist:</label></th><td><select name="aerial_size_dist" id="id_A">
<option value="A1" selected="selected">A1</option>
<option value="A2">A2</option>
</select></td></tr>

<tr><th><label for="id_B">Ground spray type:</label></th><td><select name="ground_spray_type" id="id_B">
<option value="B1" selected="selected">B1</option>
<option value="B2">B2</option>
</select></td></tr>
</table>                  
</form>
</div>

Voici le code jQuery:

<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> 

<script>$(function() {
    $("tr:nth-child(2)").hide();
    $("tr:nth-child(3)").hide();

    $('#id_application_method').change(function() {
    ($(this).val() == "A") ? 
    $("tr:nth-child(2)").show() : $("tr:nth-child(2)").hide();

    ($(this).val() == "B") ? 
    $("tr:nth-child(3)").show() : $("tr:nth-child(3)").hide();
    });});</script>

OriginalL'auteur TH339 | 2012-04-17

javascript jquery

5

Je pense que iKnowKungFoo la réponse est très simple (il a mon vote). J'ai remarqué que vous avez dit que votre formulaire est généré par Django. Dans le cas où il n'est pas facile pour vous de modifier votre code HTML généré le balisage, voici une autre solution à votre problème.
```
$(document).ready(function() {
    var $aerialTr = $('#id_A').closest('tr').hide();
    var $groundSprayTr = $('#id_B').closest('tr').hide();

    $('#id_application_method').change(function() {
        var selectedValue = $(this).val();

        if(selectedValue  === 'A') {
            $aerialTr.show();
            $groundSprayTr.hide();
        } else if (selectedValue === 'B') {
            $aerialTr.hide();
            $groundSprayTr.show();
        } else {
            $aerialTr.hide();
            $groundSprayTr.hide();
        }
    });
});
```
Ici est un jsFiddle pour tester: http://jsfiddle.net/willslab/n54cE/2/

Il devrait travailler avec votre balisage existant. Il sélectionne le tr est basé sur le courant Id pour les listes de sélection. Si vous changez ces Identifiants, vous aurez besoin de modifier les sélecteurs en conséquence.

J'espère que ça aide!

Edit: Voici une autre alternative, "hybride" approche inspirée par iKnowKungFoo. Sa solution est très élégante, j'ai donc combiné avec mon propre. Cela fonctionne sans modifications (HTML ou CSS.
```
$(document).ready(function() {
    $('#id_A').closest('tr').addClass('method_options').hide();
    $('#id_B').closest('tr').addClass('method_options').hide();

    $('#id_application_method').change(function() {
        $('tr.method_options').hide();
        $('#id_' + $(this).val()).closest('tr').show();
    });
});
```
jsFiddle lien: http://jsfiddle.net/willslab/6ASJu/3/

Merci pour la solution!
Puis-je vous recommander deux réponses?
Vous ne pouvez accepter une réponse. Parfois, il y a plus d'une bonne réponse. Juste accepter celui qui vous est le plus utile à votre problème, et donner à l'autre des réponses utiles, un upvote. Qui montrera l'appréciation et indiquer aux autres ce qu'il est utile aussi. Vous êtes les bienvenus. 🙂

OriginalL'auteur Will Klein

Vos questions décrire les bonnes idées. Vous avez juste à la structure de votre code HTML pour profiter d'eux.

JSFiddle posté ici: http://jsfiddle.net/iknowkungfoo/TKamw/

HTML - j'ai ajouté un ID et une CLASSE pour chaque TR qui correspondent aux valeurs de votre primaire SÉLECTIONNEZ:

<div class="articles">
    <form method="get" action="_output.html">
        <table align="center">
            <tr>
              <th><label for="id_application_method">Application method:</label></th>
              <td><select name="application_method" id="id_application_method">
                <option value="">Pick first</option>
                <option value="A">Aerial</option>
                <option value="B">Ground</option>
              </select></td>
            </tr>
            <tr id="tr_A" class="method_options">
              <th><label for="id_A">Aerial Size Dist:</label></th>
              <td><select name="aerial_size_dist" id="id_A">
                <option value="A1" selected="selected">A1</option>
                <option value="A2">A2</option>
              </select></td>
            </tr>
            <tr id="tr_B" class="method_options">
              <th><label for="id_B">Ground spray type:</label></th>
              <td><select name="ground_spray_type" id="id_B">
                <option value="B1" selected="selected">B1</option>
                <option value="B2">B2</option>
              </select></td>
            </tr>
        </table>
    </form>
</div>

CSS - masquer les TRs par défaut:

tr.method_options { display: none; }

JavaScript/jQuery - Lors de la primaire SÉLECTIONNEZ changements, masquer tous TRs avec une CLASSE de "method_options". Ensuite, Trouver le TR dont l'ID correspond à la valeur de l'option sélectionnée dans le primaire, de SÉLECTIONNER et de le montrer. Si aucune correspondance n'est trouvée, alors rien n'est montré.

$(document).ready(function(){

    $('#id_application_method').on('change', function() {         

        $('tr.method_options').hide();
        $('#tr_' + $(this).val() ).show();

    });

});

Merci beaucoup pour cette solution!

OriginalL'auteur Adrian J. Moreno

Vous devez vous connecter pour publier un commentaire.