您的位置：首页 > Web前端 > JQuery

JQuery 现实 三级联动菜单

2016-10-31 21:56 344 查看
<!DOCTOPE html>

<html>

  <head lang="en">

    <meta charset="UTF-8"/>

  </head>

  <body>

  <select class="one">

   <option>未选择</option>

  </select>

  <select class="two">

   <option>未选择</option>

  </select>

  <select class="three">

   <option>未选择</option>

  </select>

  <body>

</html>

//加载JQuery 函数


<script src="jquery-3.1.0.min.js"></script>

<script>

// 创建一个数组

var info = [

           [1,[11,[111,112,113]],[12,[121,122,123]],[13,[131,132,133]]],

           [2,[21,[211,212,213]],[22,[221,222,223]],[23,[231,232,233]]],

           [3,[33,[331,312,313]],[32,[321,322,323]],[33,[331,332,333]]],

           ];

//加载开始选项

$(function(){

   for(var i=0;i<3;i++){

     $(".one").append("<option value="+i+">"+info[i][0]+"</option>");

   }

})

// 加载第二级菜单

$(".one").change(function(){

   all_option($(".two option"),$(".two"),$(this).val(),0);

});

// 加载第三级菜单

$(".two").change(function(){

   all_option($(".three option"),$(".three"),$(this).val(),1);

});

//通用的函数加载菜单

function all_option(obj_one,obj_two,val,z){

   obj_one.remove();

   obj_two.append("<option>未选择</option>");

   if(val!="未选择"){

   for(var i=0;i<3;i++){

   if(z==0)

     obj_two.append("<option value="+i+">"+info[val][i+1][0]+"</option>");

   if(z==1)

     obj_two.append("<option>"+info[$(".one").val()][parseInt(val)+1][1][i]+"</option>");

   }

}

}

</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航