3

我有两个相关的下拉列表，其中第二个下拉列表中的内容取决于第一个下拉列表中的选择。例如，在下面的 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>
4

2 回答 2

5
于 2012-04-17T23:34:44.650 回答
5

I think iKnowKungFoo's answer is very straightforward (it's got my vote). I noticed you said your form is generated by Django though. In case it's not straightforward for you to modify your generated HTML markup, here is another solution to your problem.

$(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();
        }
    });
});

Here is a jsFiddle to test: http://jsfiddle.net/willslab/n54cE/2/

It should work with your existing markup. It selects the tr's based on the current IDs for the select boxes. If you change those IDs, you will need to modify the selectors accordingly.

I hope that helps!

Edit: Here is another alternative, "hybrid" approach inspired by iKnowKungFoo. His solution is very elegant, so I combined it with my own. This works without changes to HTML or 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 link: http://jsfiddle.net/willslab/6ASJu/3/

于 2012-04-18T01:16:25.137 回答