jQuery: Условное отображение элемента, основанного на выборе выпадающего списка

Question

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

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

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

1. Есть ли способ выбрать целую строку, не используя подсчет ее последовательности (nth-child())? Можно ли выбрать всю строку, основанную на выборе идентификатора элемента? Например, можно ли сначала выбрать $ ('# id_A'), а затем расширить мой выбор до целой строки?

2. Есть ли лучший способ (цикл?) Для достижения этой функции скрытия или шоу, а не для сравнения всех возможных вариантов (($ (this) .val() == "X"))?

Спасибо!

Вот HTML-код, а форма генерируется Джанго:

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

Вот код JQuery:

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

Answer 1

Я думаю, что ответ iKnowKungFoo очень прост (он получил мой голос). Я заметил, что вы сказали, что ваша форма создана Django. В случае, если вам не просто изменить вашу сгенерированную разметку HTML, вот еще одно решение вашей проблемы.

$(document).ready(function() { 
    var $aerialTr = $('#id_A').closest('tr').hide(); 
    var $groundSprayTr = $('#id_B').closest('tr').hide(); 

    $('#id_application_method').change(function() { 
     var selectedValue = $(this).val(); 

     if(selectedValue === 'A') { 
      $aerialTr.show(); 
      $groundSprayTr.hide(); 
     } else if (selectedValue === 'B') { 
      $aerialTr.hide(); 
      $groundSprayTr.show(); 
     } else { 
      $aerialTr.hide(); 
      $groundSprayTr.hide(); 
     } 
    }); 
}); 

Вот jsFiddle тесту: http://jsfiddle.net/willslab/n54cE/2/

Он должен работать с существующей разметке. Он выбирает tr на основе текущих идентификаторов для полей выбора. Если вы измените эти идентификаторы, вам необходимо соответствующим образом изменить селектор.

Я надеюсь, что это поможет!

Редактировать: Вот еще один вариант, «гибридный» подход, основанный на iKnowKungFoo. Его решение очень изящно, поэтому я объединил его со своим. Это работает без изменений в HTML или CSS.

$(document).ready(function() { 
    $('#id_A').closest('tr').addClass('method_options').hide(); 
    $('#id_B').closest('tr').addClass('method_options').hide(); 

    $('#id_application_method').change(function() { 
     $('tr.method_options').hide(); 
     $('#id_' + $(this).val()).closest('tr').show(); 
    }); 
}); 

jsFiddle ссылка: http://jsfiddle.net/willslab/6ASJu/3/

Answer 2

Ваши вопросы описывают правильные идеи. Вам просто нужно структурировать свой HTML, чтобы использовать их.

JSFiddle размещена здесь: http://jsfiddle.net/iknowkungfoo/TKamw/

HTML - я добавил ID и CLASS для каждого TR, которые соответствуют значениям в основной SELECT:

<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 id="tr_A" class="method_options"> 
       <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 id="tr_B" class="method_options"> 
       <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>

CSS - скрыть эти ТУ по умолчанию:
tr.method_options { display: none; }​

JavaScript/jQuery - Когда первичный SELECT изменяется, скройте все TR с классом «method_options». Затем найдите TR, идентификатор которого соответствует значению выбранного параметра в основном SELECT и покажет его. Если совпадения нет, то ничего не отображается.

$(document).ready(function(){ 

    $('#id_application_method').on('change', function() {   

     $('tr.method_options').hide(); 
     $('#tr_' + $(this).val()).show(); 

    }); 

});