jQuery：有条件地显示基于下拉框选择的元素

Question

我有两个相关的下拉列表，其中第二个下拉列表中的内容取决于第一个下拉列表中的选择。例如，在以下HTML代码中，您将首先选择应用程序方法。如果您选择Aerial作为应用方法，那么您将回答更多问题，例如天线尺寸dist。否则，您需要回答地面喷雾类型。

所以一旦网页被加载，两个第二级下拉列表（天线大小距离和地面喷雾类型）被隐藏。只有在第一项（申请方法）中做出相关选择时才会出现。

我能够在jQuery（以下jQuery代码）中实现此功能。但我的做法很愚蠢。我的问题是：

1. 有没有一种方法来选择整个行，而不使用计算其序列（nth-child（））？基于选择元素ID，我可以选择整行吗？例如，我可以先选择$（'＃id_A'），然后将我的选择扩展到整行？ （$（this）.val（）==“X”））？有没有更好的方法（循环？）来实现这个隐藏或显示功能，而不是比较所有可能的选择（（$（this）.val（）==“X”））？

谢谢！

下面是HTML代码，并通过Django的产生形式：

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

应该与您现有的标记工作。它根据选择框的当前ID选择tr。如果您更改这些ID，则需要相应地修改选择器。

我希望有帮助！

编辑：这是另一种替代方法，由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和类来匹配您的主值，每个TR选择：

<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改变时，用CLASS“method_options”隐藏所有TR。然后，找到其ID与主SELECT中所选选项的值匹配并显示的TR。如果没有匹配，则不显示任何内容。

$(document).ready(function(){ 

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

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

    }); 

});