JS全国城市三级联动
来源:互联网 发布:淘宝刷销量团队 编辑:程序博客网 时间:2024/05/01 16:02
HTML
<select id="s_province" name="s_province"></select><select id="s_city" name="s_city" ></select><select id="s_county" name="s_county"></select><script class="resources library" src="js/area.js" type="text/javascript"></script><script type="text/javascript">_init_area();</script>
JS
/** 全国三级城市联动 js版*/function Dsy(){ this.Items = {};}Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray;}Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined") return false; return true;}function change(v){ var str="0"; for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1)); }; var ss=document.getElementById(s[v]); with(ss){ length = 0; options[0]=new Option(opt0[v],opt0[v]); if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v){ if(dsy.Exists(str)){ ar = dsy.Items[str]; for(i=0;i<ar.length;i++){ options[length]=new Option(ar[i],ar[i]); }//end for if(v){ options[0].selected = true; } } }//end if v if(++v<s.length){change(v);} }//End with}var dsy = new Dsy();dsy.add("0",["北京市","天津市","上海市","重庆市","河北省","山西省","内蒙古","辽宁省","吉林省"]);dsy.add("0_0_0",["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区"]);dsy.add("0_0",["北京市"]);dsy.add("0_1_0",["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区"]);dsy.add("0_1",["天津市"]);dsy.add("0_2_0",["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区"]);dsy.add("0_2",["上海市"]);dsy.add("0_3_0",["渝中区","大渡口区","江北区","沙坪坝区","开县","彭水苗族土家族自治县"]);dsy.add("0_3",["重庆市"]);dsy.add("0_4_0",["长安区","桥东区","桥西区","新华区","裕华区","赞皇镇","无极县","无极镇"]);dsy.add("0_33",["台北","高雄","台中","花莲","基隆","嘉义","金门","连江"]);dsy.add("0",["北京市","天津市","上海市","重庆市","河北省","云南省","西藏"]);//此处省略... 完整内容请参见Github的代码:https://github.com/itmyhome2013/national-cities-three-linkagevar s=["s_province","s_city","s_county"];//三个select的namevar opt0 = ["省份","地级市","区县"];//初始值function _init_area(){ //初始化函数 for(i=0;i<s.length-1;i++){ document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")"); } change(0);}
在线演示:national-cities-three-linkage
完整源码:click
0 0
- JS全国城市三级联动
- js全国城市三级联动
- 全国城市三级联动
- 全国城市三级联动
- 【JavaScript】全国城市三级联动
- js实现全国三级城市联动select选择
- js 城市三级联动
- 全国省市区三级联动js
- 【Java学习-J.160523.0.17】js全国城市三级联动代码
- js全国省市区(县)三级联动
- js全国、省、市三级联动
- 全国省市县三级地址联动js
- 全国省市区三级城市联动下来选项select插件
- 全国城市二级联动js插件
- Js做的城市三级联动
- Js做的城市三级联动,原创
- Js做的城市三级联动,原创
- 原生JS实现的城市三级联动
- 数据集合
- java+Oracle Sqlload 大数据
- 在Android Studio中为jar添加source源码
- 仿ios垂直滚动选择
- 浅析HTTPS与SSL原理
- JS全国城市三级联动
- 《C缺陷与陷阱》读书总结
- 心理学报
- 四周实现爬虫系统(2)---爬取租房信息
- 策略模式
- 如何删除npm之前设置的npm config set prefix...
- 北朝鲜的基督徒(没有不哭的)!
- Dataset的用法
- spring在ssh框架中到底起到什么作用