Ich habe zwei verwandte Dropdown-Listen, in denen der Inhalt der zweiten Dropdown-Liste von der Auswahl abhängt, die in der ersten getroffen wurde. Im folgenden HTML-Code wählen Sie beispielsweise zuerst die Anwendungsmethode aus. Wenn Sie als Anwendungsmethode Antenne wählen, werden Sie weitere Fragen beantworten, z. B. Luftgröße dist. Andernfalls müssen Sie den Bodensprühtyp beantworten.

Sobald die Webseite geladen ist, werden die beiden Dropdown-Listen der zweiten Ebene (Luftgrößenabstand und Bodensprühtyp) ausgeblendet. Sie werden nur angezeigt, wenn die entsprechende Auswahl in der ersten getroffen wurde (Anwendungsmethode).

Ich bin in der Lage, diese Funktion in jQuery (unter jQuery-Code) zu erreichen. Aber mein Ansatz ist ziemlich dumm. Meine Frage ist:

Gibt es eine Möglichkeit, die gesamte Zeile auszuwählen, ohne die Sequenz zu zählen (n-child ())? Kann ich die gesamte Zeile auswählen, basierend auf der Auswahl einer Element-ID? Kann ich zum Beispiel zuerst $ ('# id_A') auswählen und dann meine Auswahl auf die gesamte Zeile erweitern?

Gibt es eine bessere Möglichkeit (eine Schleife?), Um dieses Versteck- oder Einblendmerkmal zu erzielen, als alle möglichen Auswahlen zu vergleichen (($ (this) .val () == "X"))?

Vielen Dank!

Hier ist der HTML-Code und das Formular wird von Django generiert:

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

Hier ist der jQuery-Code:

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