Javascript jQuery:根据下拉框选择条件显示元素
我有两个相关的下拉列表,其中第二个下拉列表中的内容取决于第一个下拉列表中的选择。例如,在下面的HTML代码中,您将首先选择应用程序方法。如果您选择天线作为应用方法,则您将回答进一步的问题,如天线尺寸距离。否则,您需要回答地面喷洒类型 因此,一旦网页被加载,两个二级下拉列表(天线尺寸距离和地面喷雾类型)就会隐藏。只有在第一个选项(应用方法)中做出相关选择时,它们才会出现 我能够在jQuery中实现这个特性(在jQuery代码下面)。但我的方法相当愚蠢。我的问题是:Javascript jQuery:根据下拉框选择条件显示元素,javascript,jquery,Javascript,Jquery,我有两个相关的下拉列表,其中第二个下拉列表中的内容取决于第一个下拉列表中的选择。例如,在下面的HTML代码中,您将首先选择应用程序方法。如果您选择天线作为应用方法,则您将回答进一步的问题,如天线尺寸距离。否则,您需要回答地面喷洒类型 因此,一旦网页被加载,两个二级下拉列表(天线尺寸距离和地面喷雾类型)就会隐藏。只有在第一个选项(应用方法)中做出相关选择时,它们才会出现 我能够在jQuery中实现这个特性(在jQuery代码下面)。但我的方法相当愚蠢。我的问题是: 有没有一种方法可以选择整行,而不
<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>
使用方法:
先挑
空中的
地面
天线尺寸距离:
A1
A2
地面喷洒类型:
地下一层
地下二层
以下是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>
$(函数(){
$(“tr:nth child(2)”).hide();
$(“tr:nth child(3)”).hide();
$('#id#u应用程序_方法')。更改(函数(){
($(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();
});});
您的问题描述了正确的想法。你只需要构造你的HTML来利用它们
JSFIDLE发布在这里:
HTML-我为每个TR添加了一个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>
我认为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();
}
});
});
下面是要测试的JSFIDLE:
它应该与您现有的标记一起使用。它根据选择框的当前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();
});
});
jsiddle link:感谢您提供的伟大解决方案!你只能接受一个答案。有时有不止一个好的回应。只要接受你认为对你的问题最有帮助的答案,并对其他有帮助的答案投赞成票。这将表示赞赏,并向其他人表明这也是有益的。不客气。:-)非常感谢您提供此解决方案!
$(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();
});
});