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

时间:2012-04-17 23:08:15

标签: javascript jquery

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

因此,一旦加载了网页,就会隐藏两个第二级下拉列表(天线尺寸dist。和地面喷涂类型。)。只有在第一个(应用方法)中进行相关选择时,它们才会出现。

我能够在jQuery(jQuery代码下面)中实现这个功能。但我的做法非常愚蠢。我的问题是:

  1. 有没有办法选择整行,而不使用其序列计数(nth-child())?我可以根据选择元素ID来选择整行吗?例如,我可以先选择$('#id_A'),然后将我的选择扩展到整行吗?

  2. 有没有更好的方法(循环?)来实现这个隐藏或显示功能而不是比较所有可能的选择(($(this).val()==“X”))?

  3. 谢谢!

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

2 个答案:

答案 0 :(得分:5)

您的问题描述了正确的想法。您只需构建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();

    });

});

答案 1 :(得分:5)

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

相关问题