仅使用 jquery 或 javascript 的条件下拉列表答案

【问题标题】：Conditional dropdownlist using jquery or javascript only仅使用 jquery 或 javascript 的条件下拉列表
【发布时间】：2013-04-03 16:19:36
【问题描述】：

仅使用 jquery 或 javascript 的条件下拉列表

场景：我有一个主下拉列表，如果我在下拉列表中选择“dropdownmain1”，它将显示下拉列表对应的“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 吗？

【问题讨论】：

看起来很简单，使用 jquery 或只是普通的 javascript。你有什么问题吗？如果是这样，您可以发布您的代码。
可以参考这个链接graphnickdesign.com/blog/…>
这是你要的stackoverflow.com/questions/4282537/…

标签： javascript jquery drop-down-menu

【解决方案1】：

是的，您可以使用 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();
});

http://jsfiddle.net/p7jyv/2/

还有一种更易读的方法：

var $topSelect = $('select[name="dropdownmain"]');
var $nestedSelects = $('select[name!="dropdownmain"]');
showApplicableSelect();
$topSelect.change(showApplicableSelect);
function showApplicableSelect() {
    $nestedSelects.hide();
    $('select[name="' + $topSelect.val() + '"]').show();
}

http://jsfiddle.net/p7jyv/5/

【讨论】：