条件下拉列表使用jquery或javascript [英] Conditional dropdownlist using jquery or javascript only
本文介绍了条件下拉列表使用jquery或javascript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
条件下拉列表使用jquery或javascript only
Conditional dropdownlist using jquery or javascript only
情景:我有一个主要下拉列表列表,如果我在我的下拉列表中选择dropdownmain1,它将显示下拉列表对应的值'dropdownmain1'
Scenario: I have a main dropdownlist list and if i select 'dropdownmain1' on my dropdownlist it will show dropdownlist corresponding valuues for 'dropdownmain1'
<select name="dropdownmain" id="" title="">
<option value="dropdownmain1">dropdownmain1</option>
<option value="dropdownmain2">dropdownmain2</option>
<option value="dropdownmain3">dropdownmain3</option>
<option value="dropdownmain4">dropdownmain4</option>
</select>
//if selected dropdownmain1 this dropdown will display
<select name="dropdownmain1" id="" title="">
<option value="dropdownmain1-submenu1">dropdownmain1-submenu1</option>
<option value="dropdownmain1-submenu2">dropdownmain1-submenu2</option>
<option value="dropdownmain1-submenu3">dropdownmain1-submenu3</option>
<option value="dropdownmain1-submenu4">dropdownmain1-submenu4</option>
</select>
//if selected dropdownmain2 this dropdown will display
<select name="dropdownmain2" id="" title="">
<option value="dropdownmain2-submenu1">dropdownmain2-submenu1</option>
<option value="dropdownmain2-submenu2">dropdownmain2-submenu2</option>
<option value="dropdownmain2-submenu3">dropdownmain2-submenu3</option>
<option value="dropdownmain2-submenu4">dropdownmain2-submenu4</option>
</select>
//if selected dropdownmain3 this dropdown will display
<select name="dropdownmain3" id="" title="">
<option value="dropdownmain3-submenu1">dropdownmain3-submenu1</option>
<option value="dropdownmain3-submenu2">dropdownmain3-submenu2</option>
<option value="dropdownmain3-submenu3">dropdownmain3-submenu3</option>
<option value="dropdownmain3-submenu4">dropdownmain3-submenu4</option>
</select>
//if selected dropdownmain4 this dropdown will display
<select name="dropdownmain4" id="" title="">
<option value="dropdownmain4-submenu1">dropdownmain4-submenu1</option>
<option value="dropdownmain4-submenu2">dropdownmain4-submenu2</option>
<option value="dropdownmain4-submenu3">dropdownmain4-submenu3</option>
<option value="dropdownmain4-submenu4">dropdownmain4-submenu4</option>
</select>
是否可以使用jquery或javascript?
is this possible using jquery or javascript only?
推荐答案
是的,您可以使用jquery轻松实现。
Yes you can do it easily with jquery.
$('select[name!="dropdownmain"]').hide();
$('select[name="' + $('select[name="dropdownmain"]').val() + '"]').show();
$('select[name="dropdownmain"]').change(function(){
$('select[name!="dropdownmain"]').hide();
$('select[name="' + $(this).val() + '"]').show();
});
还有一种更可读的方法:
And a more readable approach:
var $topSelect = $('select[name="dropdownmain"]');
var $nestedSelects = $('select[name!="dropdownmain"]');
showApplicableSelect();
$topSelect.change(showApplicableSelect);
function showApplicableSelect() {
$nestedSelects.hide();
$('select[name="' + $topSelect.val() + '"]').show();
}
这篇关于条件下拉列表使用jquery或javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文