Mam dwie powiązane listy rozwijane, w których zawartość drugiej listy rozwijanej zależy od wyboru dokonanego w pierwszej. Na przykład w poniższym kodzie HTML najpierw wybierzesz metodę aplikacji. Jeśli wybierzesz Aerial jako metodę aplikacji, odpowiesz na dalsze pytania, takie jak rozmiar anteny dist. W przeciwnym razie musisz odpowiedzieć na rodzaj natrysku gruntu.

Zatem po załadowaniu strony internetowej, dwie listy rozwijane drugiego poziomu (rozmiar anteny i rodzaj natrysku ziemi) są ukryte. Pojawią się tylko wtedy, gdy w pierwszym z nich zostanie dokonany odpowiedni wybór (metoda aplikacji).

Jestem w stanie osiągnąć tę funkcję w jQuery (poniżej kodu jQuery). Ale moje podejście jest dość głupie. Moje pytanie brzmi:

Czy istnieje sposób na zaznaczenie całego wiersza, bez używania liczenia jego sekwencji (nth-child ())? Czy mogę wybrać cały wiersz na podstawie wyboru identyfikatora elementu? Na przykład, czy mogę najpierw wybrać $ ('# id_A'), a następnie rozwinąć mój wybór do całego wiersza?

Czy istnieje lepszy sposób (pętla?), Aby osiągnąć tę funkcję ukryj lub pokaż zamiast porównywać wszystkie możliwe opcje (($ (this) .val () == „X”))?

Dzięki!

Oto kod HTML, a formularz jest generowany przez Django:

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

Oto kod jQuery:

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