js三级省市区选择
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Province_three</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
font: 400 12px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei";
}
body{
padding: 50px;
}
select{
margin-right: 5px;
}
</style>
</head> <body> <script>
window.onload = function(){
//
var aProvince = [
"浙江省",
"江苏省",
"广东省"
]
var aCity = [
["杭州市","宁波市","舟山市","温州市","绍兴市"],
["苏州市","南京市"],
["广州市","深圳市"]
]
var aArea = [
[
["滨江区","西湖区","上城区"],
["海曙区","江东区","鄞州区","江北区"],
["定海区"],
["温岭区"],
["柯桥区"]
],
[
["吴中区"],
["鼓楼区"]
],
[
["越秀区","海珠区"],
["宝安区","龙岗区"]
]
]
//fn
function fnAddOption(innerH,target,isClear){
var oOption = document.createElement("option");
oOption.value = innerH;
oOption.innerHTML = innerH;
//clearOptions
if(isClear){
var tLength = target.children.length;
for(var i=0; i<tLength; i++){
target.removeChild(target.children[0]);
}
}
target.appendChild(oOption);
} function fnGetProvince(ele,initP,initC,initA){
ele.innerHTML = '<select><option>--选择省--</option></select><select><option>--选择市--</option></select><select><option>--选择区--</option></select>';
var oSelect1 = ele.getElementsByTagName("select")[0];
var oSelect2 = ele.getElementsByTagName("select")[1];
var oSelect3 = ele.getElementsByTagName("select")[2];
for(var i=0; i<aProvince.length; i++){
fnAddOption(aProvince[i],oSelect1);
//initP
if(typeof(initP)!="undefined" && initP == aProvince[i]){
oSelect1.getElementsByTagName("option")[i+1].setAttribute("selected",true);
onchangeS1();
//initC
if(typeof(initC)!="undefined"){
var oOptions = oSelect2.getElementsByTagName("option");
for(var j=0; j<oOptions.length; j++){
if(initC == oOptions[j].innerHTML){
oOptions[j].setAttribute("selected",true);
onchangeS2();
//initA
if(typeof(initA)!="undefined"){
var oOptions = oSelect3.getElementsByTagName("option");
for(var k=0; k<oOptions.length; k++){
if(initA == oOptions[k].innerHTML){
oOptions[k].setAttribute("selected",true);
}
}
}
}
}
}
}
//init end
} //select1 onchange event
function onchangeS1(){
var sIndex = oSelect1.selectedIndex; fnAddOption("--选择市--",oSelect2,true);
fnAddOption("--选择区--",oSelect3,true);
if(sIndex==0){
return;
}
for(var i=0; i<aCity[sIndex-1].length; i++){
fnAddOption(aCity[sIndex-1][i],oSelect2);
}
}
oSelect1.onchange = onchangeS1; //select2 onchange event
function onchangeS2(){
var sIndex = oSelect1.selectedIndex;
var sCityIndex = oSelect2.selectedIndex; fnAddOption("--选择区--",oSelect3,true);
if(sCityIndex==0){
return;
}
for(var i=0; i<aArea[sIndex-1][sCityIndex-1].length; i++){
fnAddOption(aArea[sIndex-1][sCityIndex-1][i],oSelect3);
}
}
oSelect2.onchange = onchangeS2; } //get fn
var oDiv = document.getElementById("div1");
fnGetProvince(oDiv,"广东省","深圳市","龙岗区");
}
</script> <div id="div1"></div> </body>
</html>
下面是二级省市选择：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Province_Two</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
font: 400 12px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei";
}
body{
padding: 50px;
}
select{
margin-right: 5px;
}
</style>
</head> <body> <script>
window.onload = function(){
//
var aProvince = [
"浙江省",
"江苏省",
"广东省"
]
var aCity = [
["杭州市","宁波市","舟山市","温州市","绍兴市"],
["苏州市","南京市"],
["广州市","深圳市"]
] //fn
function fnAddOption(innerH,target){
var oOption = document.createElement("option");
oOption.value = innerH;
oOption.innerHTML = innerH;
target.appendChild(oOption);
} function fnGetProvince(ele){
ele.innerHTML = '<select><option>--请选择--</option></select><select><option>--请选择--</option></select>';
var oSelect1 = ele.getElementsByTagName("select")[0];
var oSelect2 = ele.getElementsByTagName("select")[1];
for(var i=0; i<aProvince.length; i++){
fnAddOption(aProvince[i],oSelect1);
} //select onchange event
oSelect1.onchange = function(){
var sIndex = oSelect1.selectedIndex;
var sOption = oSelect1[sIndex]; oSelect2.innerHTML="";
if(sIndex==0){
fnAddOption("--请选择--",oSelect2);
return;
}
for(var i=0; i<aCity[sIndex-1].length; i++){
fnAddOption(aCity[sIndex-1][i],oSelect2);
}
}
} //get fn
var oDiv = document.getElementById("div1");
fnGetProvince(oDiv);
}
</script> <div id="div1"></div> </body>
</html>
js三级省市区选择的更多相关文章
- 省市区js三级联动（原创）
看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...
- vue仿京东省市区三级联动选择组件
工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...
- jquery 三级关联选择效果
在网页制作中,三级关联选择经常遇到,于是归纳了一个进行参考 代码如下: <!DOCTYPE html> <html lang="en"> <head& ...
- asp.net mvc中使用jquery H5省市县三级地区选择控件
地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...
- [js开源组件开发]js手机联动选择地区仿ios 开源git
js手机联动选择地区 前言:由于网上找到了一个mobiscrool,比较全,但是不开源,只能试用15天,正式版竟然要三千块钱,穷人只能自己动手,写了个只针对弹窗地区选择的. 本站点所有的资源均在git ...
- [js开源组件开发]js手机联动选择日期 开源git
js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...
- js控制日期选择框datetime-local和select的展开
注: js控制元素展开不受元素css属性的限制,例如opacity,z-index等 1. 使用js控制日期选择框的展开 ios: document.querySelector(".targ ...
- JS实现日期选择
简单的JS实现日期选择,对于PHP来说就像是遍历一样,不过我个人觉得JS这个很有趣,随便记录一下 开始: <select name="gh_date"><opti ...
- Python 练习：三级菜单选择城市(二)
优化了上一个三级菜单选择城:http://www.cnblogs.com/klvchen/p/8646466.html info = { 'GuangDong':{ 'GuangZhou': ['Ti ...
随机推荐
- C++基础练习题（一）： 查找最短单词
/*<说明> 编程实现将字符串中最短的单词输出,在主函数中输入字符串,编写一个函数完成最短单词的查找 </说明>*/ #include<time.h> #inclu ...
- 【opencv】轮廓相关
IplImage* contours_rect; IplImage* contours; CvMemStorage* countours_storage=NULL; if(contours_rect= ...
- IIS 发布mvc 403.14
转载: iis7 发布mvc3 遇到的HTTP错误 403.14-Forbidden Web 服务器被配置为不列出此目录的内容及Login on failed for “IIS APPPOOL\ASP ...
- [Android Pro] static 和 Volatile 的区别
reference to : http://blog.sina.com.cn/s/blog_4e1e357d0101i486.html static也是各个业务方可以去全局修改: volatile是处 ...
- 模拟赛1101d2
幸运数字(number)Time Limit:1000ms Memory Limit:64MB题目描述LYK 最近运气很差,例如在 NOIP 初赛中仅仅考了 90 分,刚刚卡进复赛,于是它决定使用一些 ...
- zmq-ios framwork
1.附件见zeromq-ios.framework百度网盘/iOS/zmq 2.zeromq-ios.framework解压拖进工程文件 3.objc-zmq见百度网盘/iOS/zmq 4.objc- ...
- 三、jQuery--jQuery实践--瀑布流布局
实现方法: 1.JavaScript 2.jQuery 3.CSS多栏布局 法一: window.onload=function(){ waterfall('main','pin'); var dat ...
- 二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- sort函数用法
原文链接:http://blog.csdn.net/csust_acm/article/details/7326418 sort函数的用法 做ACM题的时候,排序是一种经常要用到的操作.如果每次都自己 ...
- 在SQL里如何写条件逻辑？
主要涉及CASE,WHEN之类.. 不同的服务器上实现if...else...是不一样的. 建议用CASE ,WHEN,因为它们是SQL国标呢. mysql> SELECT -> SUM( ...