全国省市二级联动下拉菜单 js版


Posted in Javascript onMay 10, 2016

本文实例为大家分享了js实现二级联动下拉菜单的具体代码,供大家参考,具体内容如下

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",["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县","延庆镇"]);
dsy.add("0_1",["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","蓟县","宁河县","芦台镇","静海县","静海镇"]);
dsy.add("0_2",["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区?","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明县","城桥镇"]);
dsy.add("0_3",["渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","万盛区","双桥区","渝北区","巴南区","万州区","涪陵区","黔江区","长寿区","合川市","永川区市","江津市","南川市","綦江县","潼南县","铜梁县","大足县","荣昌县","璧山县","垫江县","武隆县","丰都县","城口县","梁平县","开县","巫溪县","巫山县","奉节县","云阳县","忠县","石柱土家族自治县","彭水苗族土家族自治县","酉阳土家族苗族自治县","秀山土家族苗族自治县"]);
dsy.add("0_4",["石家庄市","张家口市","承德市","秦皇岛市","唐山市","廊坊市","保定市","衡水市","沧州市","邢台市","邯郸市"]);
dsy.add("0_5",["太原市","朔州市","大同市","阳泉市","长治市","晋城市","忻州市","晋中市","临汾市","吕梁市","运城市"]);
dsy.add("0_6",["呼和浩特市","包头市","乌海市","赤峰市","通辽市","呼伦贝尔市","鄂尔多斯市","乌兰察布市","巴彦淖尔市","兴安盟","锡林郭勒盟","阿拉善盟"]);
dsy.add("0_7",["沈阳市","朝阳市","阜新市","铁岭市","抚顺市","本溪市","辽阳市","鞍山市","丹东市","大连市","营口市","盘锦市","锦州市","葫芦岛市"]);
dsy.add("0_8",["长春市","白城市","松原市","吉林市","四平市","辽源市","通化市","白山市","延边州"]);
dsy.add("0_9",["哈尔滨市","齐齐哈尔市","七台河市","黑河市","大庆市","鹤岗市","伊春市","佳木斯市","双鸭山市","鸡西市","牡丹江市","绥化市","大兴安岭地区"]);
dsy.add("0_10",["南京市","徐州市","连云港市","宿迁市","淮安市","盐城市","扬州市","泰州市","南通市","镇江市","常州市","无锡市","苏州市"]);
dsy.add("0_11",["杭州市","湖州市","嘉兴市","舟山市","宁波市","绍兴市","衢州市","金华市","台州市","温州市","丽水市"]);
dsy.add("0_12",["合肥市","宿州市","淮北市","亳州市","阜阳市","蚌埠市","淮南市","滁州市","马鞍山市","芜湖市","铜陵市","安庆市","黄山市","六安市","巢湖市","池州市","宣城市"]);
dsy.add("0_13",["福州市","南平市","莆田市","三明市","泉州市","厦门市","漳州市","龙岩市","宁德市"]);
dsy.add("0_14",["南昌市","九江市","景德镇市","鹰潭市","新余市","萍乡市","赣州市","上饶市","抚州市","宜春市","吉安市"]);
dsy.add("0_15",["济南市","青岛市","聊城市","德州市","东营市","淄博市","潍坊市","烟台市","威海市","日照市","临沂市","枣庄市","济宁市","泰安市","莱芜市","滨州市","菏泽市"]);
dsy.add("0_16",["郑州市","开封市","三门峡市","洛阳市","焦作市","新乡市","鹤壁市","安阳市","濮阳市","商丘市","许昌市","漯河市","平顶山市","南阳市","信阳市","周口市","驻马店市","济源市"]);
dsy.add("0_17",["武汉市","十堰市","襄樊市","荆门市","孝感市","黄冈市","鄂州市","黄石市","咸宁市","荆州市","宜昌市","随州市","省直辖县级行政单位","恩施州"]);
dsy.add("0_18",["长沙市","张家界市","常德市","益阳市","岳阳市","株洲市","湘潭市","衡阳市","郴州市","永州市","邵阳市","怀化市","娄底市","湘西州"]);
dsy.add("0_19",["广州市","深圳市","清远市","韶关市","河源市","梅州市","潮州市","汕头市","揭阳市","汕尾市","惠州市","东莞市","珠海市","中山市","江门市","佛山市","肇庆市","云浮市","阳江市","茂名市","湛江市"]);
dsy.add("0_20",["南宁市","桂林市","柳州市","梧州市","贵港市","玉林市","钦州市","北海市","防城港市","崇左市","百色市","河池市","来宾市","贺州市"]);
dsy.add("0_21",["海口市","三亚市","省直辖行政单位"]);
dsy.add("0_22",["成都市","广元市","绵阳市","德阳市","南充市","广安市","遂宁市","内江市","乐山市","自贡市","泸州市","宜宾市","攀枝花市","巴中市","达州市","资阳市","眉山市","雅安市","阿坝州","甘孜州","凉山州"]);
dsy.add("0_23",["贵阳市","六盘水市","遵义市","安顺市","毕节地区","铜仁地区","黔东南州","黔南州","黔西南州"]);
dsy.add("0_24",["昆明市","曲靖市","玉溪市","保山市","昭通市","丽江市","思茅市","临沧市","德宏州","怒江州","迪庆州","大理州","楚雄州","红河州","文山州","西双版纳州"]);
dsy.add("0_25",["拉萨市","那曲地区","昌都地区","林芝地区","山南地区","日喀则地区","阿里地区"]);
dsy.add("0_26",["西安市","延安市","铜川市","渭南市","咸阳市","宝鸡市","汉中市","榆林市","安康市","商洛市"]);
dsy.add("0_27",["兰州市","嘉峪关市","白银市","天水市","武威市","酒泉市","张掖市","庆阳市","平凉市","定西市","陇南市","临夏州","甘南州"]);
dsy.add("0_28",["西宁市","海东地区","海北州","海南州","黄南州","果洛州","玉树州","海西州"]);
dsy.add("0_29",["银川市","石嘴山市","吴忠市","固原市","中卫市"]);
dsy.add("0_30",["乌鲁木齐市","克拉玛依市","自治区直辖县级行政单位","喀什地区","阿克苏地区","和田地区","吐鲁番地区","哈密地区","克孜勒苏柯州","博尔塔拉州","昌吉州","巴音郭楞州","伊犁州","塔城地区","阿勒泰地区"]);
dsy.add("0_31",["香港特别行政区"]);
dsy.add("0_32",["澳门特别行政区"]);
dsy.add("0_33",["台北","高雄","台中","花莲","基隆","嘉义","金门","连江","苗栗","南投","澎湖","屏东","台东","台南","桃园","新竹","宜兰","云林","彰化"]);
dsy.add("0",["北京市","天津市","上海市","重庆市","河北省","山西省","内蒙古","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西","海南省","四川省","贵州省","云南省","西藏","陕西省","甘肃省","青海省","宁夏","新疆","香港","澳门","台湾省"]);

var s=["s_province","s_city"];//三个select的name
var opt0 = ["省份","地级市"];//初始值
function _init_area(){ //初始化函数
 for(i=0;i<s.length-1;i++){
  document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
 }
 change(0);
}

html代码部分:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全国城市二级联动</title>
<style type="text/css">
body{ background:#EEEEEE;margin:0; padding:0; font-family:"微软雅黑", Arial, Helvetica, sans-serif; }
a{ color:#006600; text-decoration:none;}
a:hover{color:#990000;}
.top{ margin:5px auto; color:#990000; text-align:center;}
.info select{ border:1px #993300 solid; background:#FFFFFF;}
.info{ margin:5px; text-align:center;}
.info #show{ color:#3399FF; }
.bottom{ text-align:right; font-size:12px; color:#CCCCCC; width:1000px;}
</style>
</head>
<body>
<div class="top">
 <h1>全国城市二级联动</h1>
</div>
<div class="info">
 <div>
 <select id="s_province" name="s_province"></select> 
 <select id="s_city" name="s_city" ></select> 
 <script class="resources library" src="area.js" type="text/javascript"></script>
 <script type="text/javascript">_init_area();</script>
 </div>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
深入学习JavaScript中的bom
May 27 Javascript
js实现的简单图片浮动效果完整实例
May 10 #Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 #Javascript
jQuery选择器基础入门教程
May 10 #Javascript
jquery实现图片上传前本地预览功能
May 10 #Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 #Javascript
基于jquery实现三级下拉菜单
May 10 #Javascript
jQuery Dialog对话框事件用法实例分析
May 10 #Javascript
You might like
使用PHP制作新闻系统的思路
2006/10/09 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
深入解析Python中的urllib2模块
2015/11/13 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python实现桌面气泡提示功能
2019/07/29 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
工作保证书范文
2014/04/29 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
计划生育证明书写要求
2014/09/17 职场文书
合伙购房协议样本
2014/10/06 职场文书
罗马假日观后感
2015/06/08 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers