用jQuery实现简单的二级联动 |
您所在的位置：网站首页 › jquery二级联动 › 用jQuery实现简单的二级联动 |
用jQuery实现简单的二级联动
|
这是网页效果图当你选择第一个框时第二个框会改变为相应的城市; 因为我是用bootstrap 和jQuery写的所有在写代码之前请用script标签引入bootstrap和jQuery; HTML部分 bootstrap中类container是容器 请选择 湖南 湖北 广州 河南css部分 可以为bootstrsp自定义样式; .container{ width:400px; height:200px; margin:100px auto; background:#b6ff00; }jQuery部分 首先创建一个数组; 因为这个网页的效果是当第一个下拉框改变时后面那个下拉框也要改变所以给它创建一个change()事件; 当下拉框发生改变时运行下面的一串代码 $(function () { var citm = new Array(4);//创建一个数组; citm[1] = new Array("长沙市", "株洲"); citm[2] = new Array("武汉市", "黄冈市"); citm[3] = new Array("广州市"); citm[4] = new Array("安阳市", "洛阳市"); $("#mer").change(function () { $("#egn").empty();//清空回调列表; var val = this.value; console.log(val); $.each(citm, function (i, n) { //each()方法为每个匹配元素规定要运行的函数; if (val == i) { $.each(citm[i], function (j,m) { var text = document.createTextNode(m);//createTextNode()方法创建文本节点; var op = document.createElement("option");//创建class元素; $(op).append(text); $("#egn").append(op); }) } }) }) })注意:清空回调列表 在使用完this时应该在控制台打印this判断是否是你想获取的值; append()在jq中是定义是向每一个匹配的元素内部追加内容。 在上面的代码中将创建的节点添加到id为egn的select中;
|
【本文地址】
今日新闻 |
推荐新闻 |