Tengo dos listas desplegables relacionadas, en las que los contenidos de la segunda lista desplegable dependen de la selección realizada en la primera. Por ejemplo, en el siguiente código HTML, primero elegirá el método de aplicación. Si elige Antena como el método de aplicación, entonces responderá preguntas adicionales como el tamaño de la antena dist. De lo contrario, debe responder al tipo de pulverización del suelo.

Así que una vez que se carga la página web, las dos listas desplegables de segundo nivel (tamaño de antena y tipo de pulverización en el suelo) se ocultan. Aparecerán solo cuando se haga una elección relacionada en la primera (método de aplicación).

Puedo lograr esta función en jQuery (debajo del código de jQuery). Pero mi enfoque es bastante estúpido. Mi pregunta es:

¿Hay una manera de seleccionar toda la fila, sin usar el conteo de su secuencia (nth-child ())? ¿Puedo elegir la fila completa, en base a la selección de un ID de elemento? Por ejemplo, ¿puedo primero seleccionar $ ('# id_A') y luego expandir mi selección a toda la fila?

¿Hay una mejor manera (un bucle) para lograr esta función de ocultar o mostrar en lugar de comparar todas las opciones posibles (($ (this) .val () == "X"))?

¡Gracias!

Aquí está el código HTML, y el formulario es generado por 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>

Aquí está el 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>