JQuery 现实三级联动菜单

最新推荐文章于 2024-07-21 02:56:05 发布

Remainder_years

最新推荐文章于 2024-07-21 02:56:05 发布

阅读量2.6k

点赞数

分类专栏： JS 文章标签： jquery

本文链接：https://blog.csdn.net/qq_33808550/article/details/52987375

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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);

});

//通用的函数加载菜单

Remainder_years

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery 现实三级联动菜单

未选择未选择未选择 //加载JQuery 函数// 创建一个数组var info = [ [1,[11,[111,112,113]],[12,[121,122,123]],[13,[131,132,133]]], [2,[21,[21
复制链接

扫一扫