jQuery：条件显示基于下拉框选择的元素 [英] jQuery: Conditional show an element based on drop down box selection

问题描述

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

I have two related drop-down lists, in which the contents in the second drop-down list depends on the selection made in the first one. For example, in the following HTML code, you will choose application method first. If you choose Aerial as the application method, then you will answer further question such as aerial size dist. Otherwise, you need to answer ground spray type.

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

So once the webpage is loaded, the two second level drop-down lists (aerial size dist., and ground spray type.) are hidden. They will appear only when related choice is made in the first one (application method).

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

I am able to achieve this feature in jQuery (below jQuery code). But my approach is pretty stupid. My question is:

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

1. Is there a way to select the whole row, without using counting its sequence (nth-child())? Can I choose the whole row, based on selecting an element ID ? For example, can I first select $('#id_A') and then expand my selection to the whole row?

有没有更好的方法（循环？）实现这个隐藏或显示功能而不是比较所有可能的选择（（$（this）.val（）==X））？

Is there a better way (a loop?) to achieve this hide or show feature rather than comparing all the possible choices (($(this).val() == "X") )?

谢谢！

这是HTML代码，表单由Django生成：

Here is the HTML code, and the form is generated by 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代码：

Here is the jQuery code:

<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标记，这是您的问题的另一种解决方案。

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

这是一个要测试的jsFiddle： http://jsfiddle.net/willslab/n54cE/2/

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

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

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.

我希望有所帮助！

编辑：这是另一种选择，混合方法的灵感来自iKnowKungFoo。他的解决方案很优雅，所以我将它与我自己的解决方案相结合。这不会改变HTML或CSS。

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/

jsFiddle link: http://jsfiddle.net/willslab/6ASJu/3/

这篇关于jQuery：条件显示基于下拉框选择的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！