jQuery实现级联菜单<数据动态加载>

来源：互联网发布：linux中chown r 编辑：程序博客网时间：2024/05/22 04:46

考虑到之前做后台的下拉菜单的数据来自于后台返回的json，我就考虑自己重新实现一些demo,这个级联菜单只是其一：

HTML代码：

<!doctype html><html><head>    <title>下拉列表联动</title>    <meta charset="utf-8" />    <link rel="stylesheet" href="css/index2.css" />    <script type="text/javascript" src="js/jquery-3.0.0.min.js" defer="defer"></script>    <script type="text/javascript" src="js/index2.js" defer="defer"></script></head><body>    <div id="container">    <span>类别:</span>    <select name="select1" id="sel1">    <option value="default" id="selection1" selected="selected">----请选择-----</option>    </select>    </div></body></html>

CSS代码，放在index2.css文件里.

#container {width: 350px;height: 50px;margin: 50px auto;padding: 20px;border: 2px solid black;}select{margin: 10px;width: 110px;}

js代码，放在index2.js文件里

$(function() {    (function() {        var json = [{            id: 1,            name: '蔬菜',            child: [{                id: '1',                name: '白菜'            }, {                id: '2',                name: '萝卜'            }, {                id: '3',                name: '菠菜'            }]        }, {            id: 2,            name: '肉类',            child: [{                id: '1',                name: '猪肉'            }, {                id: '2',                name: '羊肉'            }, {                id: '3',                name: '牛肉'            }]        }, {            id: 3,            name: '蛋类',            child: [{                id: '1',                name: '鸡蛋'            }, {                id: '2',                name: '鹅蛋'            }, {                id: '3',                name: '鸭蛋'            }]        }];        (function() {            var idPre = "selection";            var flag = false; //默认不创建新的select            var flag2 = false; //默认新的select下的option不存在.            function guazai(index, id, $s) {                var jsonObject = [],num = 0;                if (index === 1) {                    jsonObject = json;                    flag = true;                }                if (index === 2) {                    jsonObject = json[id - 1].child;                }                num = jsonObject.length;                var tempId ="", tempValue="", str="";                for (var i = 0; i < num; i++) {                    tempValue = jsonObject[i].name;                    tempId = idPre + index + jsonObject[i].id;                    str += "<option value='" + tempValue + "' id = '" + tempId + "'>" + tempValue + "</option>";                }                $($s).append(str);            }            guazai(1, 0, '#sel1');            $("#sel1").change(function() {                var str = '';                if (!flag) {                    $("#sel2 > option[value!='default']").remove();                    flag2 = true;                }                if (flag) {                    if (!flag2) {                        str = "<select name='select2' id='sel2'></select>";                        $(this).after(str);                        flag2 = true;                    }                    str = "<option value='default' id='" + idPre + 2 + "'>----请选择-----</option>";                    $("#sel2").append(str);                    flag = false;                }                //获得当前对象的id                var id = $(this).find("option:selected").attr("id");                var i = idPre.length + 1;                id = parseInt(id.substring(i, id.length));                guazai(2, id, '#sel2');            });        })();    })();});

在js里使用了闭包，使全局变量成为闭包范围的变量，避免污染其它代码，json数据可以从后台传到前台的。

运行截图：

点击选择：

js代码说明：js运行时加载第一个下拉菜单的数据，选择时出现第二个下拉菜单以及相关二级选型。

当第一下拉选择“---请选择时--”，第二个下拉菜单显示“---请选择--”，并删除之前加载的二级选型。

希望和大家交流，这个代码在火狐和谷歌浏览器经过测试，所有代码通过csshint或者jslint的检查。

4 0