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

jQuery: Conditional show an element based on drop down box selection

本文关键字：选择 元素 于下拉 有条件 显示 jQuery      更新时间：2023-09-26

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

因此，加载网页后，将隐藏两个二级下拉列表（空中大小距离和地面喷雾类型）。仅当在第一个（申请方法）中做出相关选择时，它们才会出现。

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

  1. 有没有办法选择整行，而不使用计算其序列（nth-child（））？我可以根据选择元素 ID 来选择整行吗？例如，是否可以先选择 $（'#id_A'），然后将我的选择扩展到整行？

  2. 有没有更好的方法（循环？）来实现这个隐藏或显示功能，而不是比较所有可能的选择（（$（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>

我认为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/

您的问题描述了正确的想法。您只需要构建HTML即可利用它们。

JSFiddle发布在这里： http://jsfiddle.net/iknowkungfoo/TKamw/

HTML - 我为每个 TR 添加了一个 ID 和 CLASS，它们与主 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：
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();
    });
});
相关文章：