JavaScript实现三级联动菜单效果
更新时间：2017年08月16日 10:34:27 作者：geewonii
这篇文章主要为大家详细介绍了三级联动菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
三级联动考察的应该是对于数据的处理，只要清楚其中的关系，再多几级都是一样的：
html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3级联动菜单</title>
<script>
var region = {
广东:
{
"广州":["广州1","广州2","广州3"],
"珠海":["珠海1","珠海2","珠海3"],
"佛山":["佛山1"]
},
湖南:
{
"常德":["石门","桃源","临澧","汉寿"],
"益阳":["益阳1","益阳2","益阳3"]
}
}
</script>
</head>
<body>
<select id="province" onchange="change(this.value);">
<option>请选择省份</option>
</select>
<select id="city" onchange="countyChange(this.value);">
<option>请选择地市</option>
</select>
<select id="county">
<option>请选择县城</option>
</select>
<script src='test.js'></script>
</body>
</html>
js部分：
var province = document.querySelector("#province");
var city = document.querySelector("#city");
var county = document.querySelector("#county");
//二级联动不用定义你选的省份,直接用省份(key)来决定下面的市(value)值
var provinceName = null;
for (ele in region){
var op = new Option(ele , ele , false , false); //new Option("文本","值",true,true).后面两个true分别表示默认被选中和有效
//console.log(op);
province.options[province.length] = op;
}
var change = function(src){
city.innerHTML = "";
if(src === '请选择省份'){
var op = new Option('请选择地市' , '请选择地市' , false , false);
city.options[0] = op;
}else{
for (index in region[src]){
//console.log(index);
var op = new Option(index , index , false , false);
city.options[city.length] = op;
}
}
//记住选择省份的值
provinceName=src;
countyChange(city.value)
}
var countyChange = function(src2){
county.innerHTML = "";
if(src2 === '请选择地市'){
var op = new Option('请选择县城','请选择县城', false , false);
county.options[0] = op;
}else{
for (index in region[provinceName][src2]){
//console.log(index);
var op = new Option(region[provinceName][src2][index] , region[provinceName][src2][index] , false , false);
county.options[county.length] = op;
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了js实现自定义下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
本文介绍了JavaScript中的this关键词指向，this是JavaScript的一个关键字，他是函数执行过程中，自动生成的一个内部对象，指当前的对象，只在当前函数内部使用，更多相关资料需要的小伙伴可以参考下面文章内容2022-05-05
这篇文章主要为大家详细介绍了js+css实现飞机大战游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
用js代码和插件实现wordpress雪花飘落效果的四种方法
这篇文章主要介绍了用js代码和插件实现wordpress雪花飘落效果的四种方法,需要的朋友可以参考下2014-12-12
JavaScript实现的购物车效果，当然这个效果可以运用在好多地方，比如好友的选择，人力资源模块等等，需要的朋友可以参考下2014-05-05
本文主要介绍了冻结JS对象方法技术，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果，Dreamweaver会自动为用户生成特定的程序代码，大家有没有想过动画的实现原理呢？2013-07-07
这篇文章主要介绍了JavaScript数组去重实现方法,结合实例形式总结分析了JavaScript数组去重ES3、ES5及ES6常见实现方法与操作注意事项,需要的朋友可以参考下2020-01-01
下面小编就为大家带来一篇WordPress 单页面上一页下一页的实现方法【附代码】。小编觉得非常不错。给大家分享一下。希望能给大家一个参考。2016-03-03
这篇文章主要介绍了JS 打印界面的CSS居中代码,需要的朋友可以参考下2014-03-03
最新评论