用JavaScript实现省份城市的三级联动

阅读：评论：0

简单的三级联动代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>省份城市的三级联动</title><style>
select{ width:150px; height:35px;}
</style>
</head>
<body>
<select class="sheng"><option>请选择</option>  //为省份设置一个默认值，为用户在选择时提供一个友好提示
</select>
<span>省</span>
<select class="shi">
</select>
<span>市</span>
<select class="qu">
</select>
<span>区</span><script>//获取到三个选择列表var shengSelect =document.querySelector(".sheng");var shiSelect =document.querySelector(".shi");var quSelect =document.querySelector(".qu");var shenglist=['广东','广西壮族自治区','湖南'];var shilist=[['广州','深圳','东莞'],['南宁','桂林','柳州'],['长沙','株洲','邵阳']];var qulist=[[['广1区','广2区','广3区'],['深1区','深2区','深3区'],['东1区','东2区']],[['南1区','南2区','南3区'],['桂1区','桂2区','桂3区'],['柳1区','柳2区']],[['长1区','长2区','长3区'],['株1区','株2区','株3区'],['邵1区','邵2区','邵3区']]];//选择省的下标var shengIndex =0;//加载省for(var i=0;i<shenglist.length;i++){var shengOption = new Option(shenglist[i]);shengSelect.options.add(shengOption);}//选择省后加载市hange =function(eve){shengIndex =eve.target.selectedIndex-1;if(shengIndex == -1){shiSelect.options.length= 0;quSelect.options.length=0;}else{shiSelect.options.length= 0;quSelect.options.length=0;for(var j=0;j<shilist.length;j++){var shiOption =new Option(shilist[shengIndex][j]);shiSelect.options.add(shiOption);}//加载市的同时，加载第一个市的全部区for(var k=0;k<qulist[shengIndex][0].length;k++){var quOption =new Option(qulist[shengIndex][0][k]);quSelect.options.add(quOption);}}}　　　　　//选择市后加载区hange=function(eve){var shiIndex =eve.target.selectedIndex;quSelect.options.length =0;for(var n =0;n<qulist[shengIndex][shiIndex].length;n++){var quOption =new Option(qulist[shengIndex][shiIndex][n]);quSelect.options.add(quOption);}}</script>
</body>
</html>

运行结果截图：

本文发布于:2024-02-02 06:04:48，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170682508741852.html

上一篇：javascript省级联动

下一篇：JavaScript省份城市的三级联动

标签：省份城市 JavaScript

留言与评论（共有 0 条评论）