Eu tenho duas listas suspensas relacionadas, nas quais o conteúdo da segunda lista suspensa depende da seleção feita na primeira. Por exemplo, no código HTML a seguir, você escolherá o método de aplicação primeiro. Se você escolher Aerial como o método de aplicação, então você responderá a perguntas adicionais, como tamanho de antena dist. Caso contrário, você precisa responder ao tipo de spray de solo.

Portanto, depois que a página da Web é carregada, as listas suspensas de dois segundos (tamanho de antena dist. E tipo de spray de solo) ficam ocultas. Eles aparecerão somente quando a escolha relacionada for feita no primeiro (método de aplicação).

Eu sou capaz de conseguir esse recurso no jQuery (abaixo do código jQuery). Mas minha abordagem é muito estúpida. Minha pergunta é:

Existe uma maneira de selecionar a linha inteira, sem usar a contagem de sua seqüência (nth-child ())? Posso escolher a linha inteira, com base na seleção de um ID de elemento? Por exemplo, posso primeiro selecionar $ ('# id_A') e depois expandir minha seleção para a linha inteira?

Existe uma maneira melhor (um loop?) Para alcançar esse recurso de ocultar ou mostrar em vez de comparar todas as opções possíveis (($ (this) .val () == "X"))?

Obrigado!

Aqui está o código HTML, e o formulário é gerado pelo 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>

Aqui está o código 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>