JQ实现多二级联动菜单的实现

jquery实现二级联动菜单的简单实现

1.html代码

<div class="main">
<form action="" id="add_cen">
<p><span><select name="" id="" class="add_c"></select><select name="" id=""></select></span>
<span class="main1"><select name="" id="" class="add_c"></select><select name="" id=""></select></span></p>
<p><span><select name="" id="" class="add_c"></select><select name="" id=""></select></span>
<span class="main1"><select name="" id="" class="add_c"></select><select name="" id=""></select></span></p>
<p><span><select name="" id="" class="add_c"></select><select name="" id=""></select></span>
<span class="main1"><select name="" id="" class="add_c"></select><select name="" id=""></select></span></p>
<p><span><select name="" id="" class="add_c"></select><select name="" id=""></select></span>
<span class="main1"><select name="" id="" class="add_c"></select><select name="" id=""></select></span></p>
<p><button>提交修改</button></p>
</form>
</div>

2.网页视图：
未添加jq效果前，第一个select随意变换option，第二个select显示的只是‘我的主页’



3.jq代码

$(document).ready(function(){
$('.add_c').ready(function(){
var se=['我的主页','我的客户','我的业务','我的项目','审核模块','我的展会','我的部门'];

var cc='';
for(var i=0;i<7;i++){
var cc=cc+'<option value="">'+se[i]+'</option>' }
$('.add_c').append(cc);
$('.add_c').siblings().append('<option value="">我的主页</option>')
})
$('.add_c').change(function(){
var set=[
['我的主页'],
['我的关联客户','我的联系客户','我的新加客户','我的可选客户'],
['我的订单','我的货架'],
['当前项目','历史项目'],
['我的审核','我的申请'],
['我的展会'],
['行政部','IT部','项目一组','项目二组','项目三组','项目四组','项目五组']
]
var aa=$(this).index('.add_c')
var bb=$('.add_c').eq(aa).find('option:selected').index()
var dd=''
for(var j=0;j<set[bb].length;j++){
if(set[bb].length<2){dd='<option value="">'+set[bb][0]+'</option>'}
else{dd=dd+'<option value="">'+set[bb][j]+'</option>'}
}
$('.add_c').eq(aa).siblings().empty().append(dd);
})
})4.刷新后
添加jq代码后，第一个select变换选择了第二个select的option选项也跟着变化