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選項也跟着變化