У меня есть два связанных раскрывающихся списка, в которых содержимое второго раскрывающегося списка зависит от выбора, сделанного в первом. Например, в следующем HTML-коде вы сначала выберете метод приложения. Если вы выберете «Антенна» в качестве метода применения, вы ответите на следующий вопрос, например «Размер антенны». В противном случае вам необходимо ответить на тип грунтового распыления.

Поэтому после загрузки веб-страницы два раскрывающихся списка второго уровня (размер антенны и тип распыления на земле) скрыты. Они появятся только тогда, когда в первом из них будет сделан соответствующий выбор (метод приложения).

Я могу добиться этой функции в JQuery (ниже кода JQuery). Но мой подход довольно глупый. Мой вопрос:

Is there a way to select the whole row, without using counting its sequence (nth-child())? Can I choose the whole row, based on selecting an element ID ? For example, can I first select $('#id_A') and then expand my selection to the whole row?

Is there a better way (a loop?) to achieve this hide or show feature rather than comparing all the possible choices (($(this).val() == "X") )?

Спасибо!

Вот HTML-код, а форма сгенерирована 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>

Вот код 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>