JavaScript实现三级级联特效
更新时间：2017年11月05日 09:36:33 作者：AsiasticWormwood
这篇文章主要介绍了JavaScript实现三级级联特效，选择省会出现相应的县下拉框，同时市的下拉框改变，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现三级级联特效的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 实现效果：选择省会出现相应的县下拉框，同时市的下拉框改变-->
<script type="application/javascript">
//二维数组存放市的信息
var shi =[["丽水市","杭州市"],["新乡","郑州"]];
//三维数组存放县的信息
var xianes = [[["云和","景宁"],["桐庐","原阳"]],[["卫辉","下乡"],["中原","二七"]]];
//所选的省值
var proIndex = 0;
function sgc(){
//获得所选择的省的下拉框值
var pro = document.getElementById("sheng");
//获得市的下拉框
var cit = document.getElementById("shi");
//将省的value与市的一维数组下标所对应
proIndex = pro.value-1;
//清空市下拉框中原有的值
cit.options.length = 1;
//通过for循环往下拉框中添加市的信息
for(var i = 0;i < shi[proIndex].length;i++){
var op = document.createElement("option");
var citName = document.createTextNode(shi[proIndex][i]);
op.value = i;
op.appendChild(citName);
cit.appendChild(op);
}
}
//市的值改变后改变县的值
function sic(){
var are = document.getElementById("xian");
var cit = document.getElementById("shi");
are.options.length = 1;
//通过proIndex获得所选的省的值作为县的数组的一维数组下标，通过cit.value作为县数组的二维数组下标，遍历获得数组值
for(var i = 0;i<xianes[proIndex][cit.value].length;i++){
var op = document.createElement("option");
var areName = document.createTextNode(xianes[proIndex][cit.value][i]);
op.value = i;
op.appendChild(areName);
are.appendChild(op);
}
}
</script>
//onchange():控件的value值改变后调用方法
<select id = "sheng" onchange = "sgc();">
<option>----省份---</option>
<option value = "1">浙江省</option>
<option value = "2">河南省</option>
</select>
<select id = "shi" onchange="sic();">
<option>---市区---</option>
</select>
<select id = "xian" >
<option>---县区---</option>
</select>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了javascript创建动态表单的方法,实例分析了javascript动态操作页面表单元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
今天小编就为大家分享一篇关于js根据需要计算数组中重复出现某个元素的个数，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
every 和 some 都是数组迭代方法,都可以遍历数组,这篇文章主要介绍了JS中some和every的区别和用法,需要的朋友可以参考下2023-05-05
最近做完一个项目，发现浏览器兼容问题，模态对话框只有IE支持，但是IE9又不能支持带框架的对话框，那个对话框的大小打死都设置不了，在网上查说因为好多功能被IE9屏蔽了，于是自己做了一个模拟对话框的东西2012-05-05
这篇文章主要介绍了ES6中的Javascript解构的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要为大家详细介绍了微信小程序实现留言板，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
javascript实现的鼠标链接提示效果生成器代码...2007-06-06
这篇文章主要介绍了微信小程序自定义弹窗实现详解(可通用）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
本文给大家分享前端高频面试题JS中堆和栈的区别和浏览器的垃圾回收机制,本文分文别类给大家介绍了栈(stack)和堆(heap)的区别基本类型和引用类型的相关知识,浏览器垃圾回收机制包括基本概念给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
这篇文章主要为大家详细介绍了如何利用原生JavaScript封装实现模态框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
最新评论