简单的一个用javascript做的'省市区'三级联动效果

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>javascript简单三级联动效果</title><meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<script>var oProc=new Array("四川省","湖南省","广东省");//随意选择三个省，如需更多，添加便是var oCity=new Array();//创建一个数组，用以存放市选择项oCity[0]=new Array("成都市","绵阳市","达州市");oCity[1]=new Array("长沙市","常德市","湘潭市");oCity[2]=new Array("广州市","深圳市","珠海市");var oDist=new Array();//创建一个数组，用于存放市级以下的各个区县oDist[0]=new Array();//这是必须声明的一项，否则会报异常oDist[1]=new Array();oDist[2]=new Array();oDist[0][0]=new Array("武侯区","锦江区","金牛区");oDist[0][1]=new Array("梓潼县","安县","罗江县");oDist[0][2]=new Array("达县","通川县","宣汉县");oDist[1][0]=new Array("长沙区","开福区","芙蓉区");oDist[1][1]=new Array("武陵区","鼎城区","汉寿县");oDist[1][2]=new Array("湘潭县","雨湖区","岳塘区");oDist[2][0]=new Array("白云区","天河区","黄埔区");oDist[2][1]=new Array("罗湖区","宝安区","福田区");oDist[2][2]=new Array("香洲区","金湾区","斗门区");//加载完成时，执行function showLoad(){var oproc=document.getElementById("proc");for(var i=0;i<oProc.length;i++){var oOpt=document.createElement("option");var oTxt=document.createTextNode(oProc[i]);oOpt.appendChild(oTxt);oproc.appendChild(oOpt);}}//当“proc”发生change事件时，执行function showCity(){var oproc=document.getElementById("proc");var ocity=document.getElementById("city");var odist=document.getElementById("dist");if(oproc.value=="-1"){//判断，当未选择时。将市级，区级中的内容清空ocity.options.length=1;odist.options.length=1;}else{ocity.options.length=1;odist.options.length=1;var num=oproc.options.selectedIndex;for(var i=0;i<oCity[num-1].length;i++){//循环加入数据var oOpt=document.createElement("option");var oTxt=document.createTextNode(oCity[num-1][i]);oOpt.appendChild(oTxt);ocity.appendChild(oOpt);}}}//当“city”发生change事件时，执行function showDist(){var oproc=document.getElementById("proc");var ocity=document.getElementById("city");var odist=document.getElementById("dist");if(ocity.value=="-1"){//判断，当未选择时。将区级中的内容清空odist.options.length=1;}else{odist.options.length=1;var numPro=oproc.options.selectedIndex;var numCity=ocity.options.selectedIndex;for(var i=0;i<oDist[numPro-1][numCity-1].length;i++){var oOpt=document.createElement("option");//创建一个option元素节点var oTxt=document.createTextNode(oDist[numPro-1][numCity-1][i]);//创建一个文本节点oOpt.appendChild(oTxt);//将文本节点加入到oOpt元素节点中odist.appendChild(oOpt);//将oOpt元素节点添加到odist中}}}
</script>
<body onload="showLoad()"><!-- 页面加载完成时，初始化省选择项 -->
<div>请选择地区：<select id="proc" onchange="showCity()"><option value="-1">--请选择省--</option></select><select id="city" onchange="showDist()" ><option value="-1">--请选择市--</option></select><select id="dist"><option value="-1">--请选择区--</option></select>
</div>
</body>
</html>

其实要真正做上一个‘’省市区级‘’的三级联动，所需的数据还多，只需向数组中添加数据就OK了。

转载于:https://my.oschina.net/u/1443572/blog/221389

简单的一个用javascript做的'省市区'三级联动效果相关推荐

JQuery+JSON的省市区三级联动效果
html中只要简单的添加以下代码 <p>三级联动</p> <div id="city_4"><select class="pro ...
WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)
近期在实现收货地址功能.用到了省市区三级联动效果.网上找到一般都是xml或json,数据源陈旧改动麻烦,改动了一下使用数据库方式实现了一下数据源解决,因为数据量比較大通过初始化批量运行SQL的方式不 ...
JavaScript实现省市区三级联动
JavaScript实现省市区三级联动之前的文章中我们说到过如何利用JavaScript实现二级联动,这次我们来说说如何利用JavaScript实现三级联动.效果如图: HTML代码: 请选择省份: ...
html地区选择js,JavaScript实现省市区三级联动
JavaScript实现省市区三级联动之前的文章中我们说到过如何利用JavaScript实现二级联动,这次我们来说说如何利用JavaScript实现三级联动.效果如图: HTML代码:请选择省份:请 ...
省市区三级联动（带经纬度、离线地图）
因为最近在做一个百度离线地图功能,里面就涉及到一个需求:根据省市区三级联动定位地图中心然后在网上找了挺久的,主要是省市区经纬度的json文件,csdn上好多要积分的:省市区经纬度json文件这是我 ...
【Android笔记】使用v5.2.2最新版CityPickerView实现省市区三级联动选择
目录 1. CityPickerView开源框架简介 2. CityPickerView在Android程序中的使用 2.1 build.gradle(Module:app)添加依赖 2.1.1 安装 ...
mysql 省市区三级联动_javaweb--json--ajax--mysql实现省市区三级联动（附三级联动数据库）...
在web中,实现三级联动很常见,尤其是利用jquery+json.但是从根本上来说jquery并不是最能让人容易理解的,接下来从最基本的javascript开始,实现由javascript+json+ ...
Android实现省市区三级联动
最近做项目时,有个需求是在用户填写的个人资料中有个选择省市区的三级联动效果,通过一番查找,在github上找到一个不错的控件:PickerView. github项目地址为:https://githu ...
android仿ios城市选择,Android 省市区三级联动选择器（仿iOS滚轮实现）
前言在实际的项目中需要使用到省市区三级联动的功能,在网上找来找去,都没有找到一个合适的库, 所以自己就封装了一个,不需要自己添加数据源,直接引用即可,一行代码搞定城市选择.怎么简单,怎么方便,怎么来 ...

简单的一个用javascript做的'省市区'三级联动效果

简单的一个用javascript做的'省市区'三级联动效果相关推荐

最新文章

热门文章