js省市联动效果完整实例代码


Posted in Javascript onDecember 09, 2015

本文实例讲述了js省市联动效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

js省市联动效果完整实例代码

具体代码如下:

<html> 
<head> 
 <title></title> 
 <script language="javascript" type="text/javascript"> 
   //定义 城市 数据数组 
cityArray = new Array(); 
cityArray[0] = new Array("北京市","东城|西城|崇文|宣武|朝阳|丰台|石景山|海淀|门头沟|房山|通州|顺义|昌平|大兴|平谷|怀柔|密云|延庆"); 
cityArray[1] = new Array("上海市","黄浦|卢湾|徐汇|长宁|静安|普陀|闸北|虹口|杨浦|闵行|宝山|嘉定|浦东|金山|松江|青浦|南汇|奉贤|崇明"); 
cityArray[2] = new Array("天津市","和平|东丽|河东|西青|河西|津南|南开|北辰|河北|武清|红挢|塘沽|汉沽|大港|宁河|静海|宝坻|蓟县"); 
cityArray[3] = new Array("重庆市","万州|涪陵|渝中|大渡口|江北|沙坪坝|九龙坡|南岸|北碚|万盛|双挢|渝北|巴南|黔江|长寿|綦江|潼南|铜梁 |大足|荣昌|壁山|梁平|城口|丰都|垫江|武隆|忠县|开县|云阳|奉节|巫山|巫溪|石柱|秀山|酉阳|彭水|江津|合川|永川|南川"); 
cityArray[4] = new Array("河北省","石家庄|邯郸|邢台|保定|张家口|承德|廊坊|唐山|秦皇岛|沧州|衡水"); 
cityArray[5] = new Array("山西省","太原|大同|阳泉|长治|晋城|朔州|吕梁|忻州|晋中|临汾|运城"); 
cityArray[6] = new Array("内蒙古自治区","呼和浩特|包头|乌海|赤峰|呼伦贝尔盟|阿拉善盟|哲里木盟|兴安盟|乌兰察布盟|锡林郭勒盟|巴彦淖尔盟|伊克昭盟"); 
cityArray[7] = new Array("辽宁省","沈阳|大连|鞍山|抚顺|本溪|丹东|锦州|营口|阜新|辽阳|盘锦|铁岭|朝阳|葫芦岛"); 
cityArray[8] = new Array("吉林省","长春|吉林|四平|辽源|通化|白山|松原|白城|延边"); 
cityArray[9] = new Array("黑龙江省","哈尔滨|齐齐哈尔|牡丹江|佳木斯|大庆|绥化|鹤岗|鸡西|黑河|双鸭山|伊春|七台河|大兴安岭"); 
cityArray[10] = new Array("江苏省","南京|镇江|苏州|南通|扬州|盐城|徐州|连云港|常州|无锡|宿迁|泰州|淮安"); 
cityArray[11] = new Array("浙江省","杭州|宁波|温州|嘉兴|湖州|绍兴|金华|衢州|舟山|台州|丽水"); 
cityArray[12] = new Array("安徽省","合肥|芜湖|蚌埠|马鞍山|淮北|铜陵|安庆|黄山|滁州|宿州|池州|淮南|巢湖|阜阳|六安|宣城|亳州"); 
cityArray[13] = new Array("福建省","福州|厦门|莆田|三明|泉州|漳州|南平|龙岩|宁德"); 
cityArray[14] = new Array("江西省","南昌市|景德镇|九江|鹰潭|萍乡|新馀|赣州|吉安|宜春|抚州|上饶"); 
cityArray[15] = new Array("山东省","济南|青岛|淄博|枣庄|东营|烟台|潍坊|济宁|泰安|威海|日照|莱芜|临沂|德州|聊城|滨州|菏泽"); 
cityArray[16] = new Array("河南省","郑州|开封|洛阳|平顶山|安阳|鹤壁|新乡|焦作|濮阳|许昌|漯河|三门峡|南阳|商丘|信阳|周口|驻马店|济源"); 
cityArray[17] = new Array("湖北省","武汉|宜昌|荆州|襄樊|黄石|荆门|黄冈|十堰|恩施|潜江|天门|仙桃|随州|咸宁|孝感|鄂州"); 
cityArray[18] = new Array("湖南省","长沙|常德|株洲|湘潭|衡阳|岳阳|邵阳|益阳|娄底|怀化|郴州|永州|湘西|张家界"); 
cityArray[19] = new Array("广东省","广州|深圳|珠海|汕头|东莞|中山|佛山|韶关|江门|湛江|茂名|肇庆|惠州|梅州|汕尾|河源|阳江|清远|潮州|揭阳|云浮"); 
cityArray[20] = new Array("广西壮族自治区","南宁|柳州|桂林|梧州|北海|防城港|钦州|贵港|玉林|南宁地区|柳州地区|贺州|百色|河池"); 
cityArray[21] = new Array("海南省","海口|三亚"); 
cityArray[22] = new Array("四川省","成都|绵阳|德阳|自贡|攀枝花|广元|内江|乐山|南充|宜宾|广安|达川|雅安|眉山|甘孜|凉山|泸州"); 
cityArray[23] = new Array("贵州省","贵阳|六盘水|遵义|安顺|铜仁|黔西南|毕节|黔东南|黔南"); 
cityArray[24] = new Array("云南省","昆明|大理|曲靖|玉溪|昭通|楚雄|红河|文山|思茅|西双版纳|保山|德宏|丽江|怒江|迪庆|临沧"); 
cityArray[25] = new Array("西藏自治区","拉萨|日喀则|山南|林芝|昌都|阿里|那曲"); 
cityArray[26] = new Array("陕西省","西安|宝鸡|咸阳|铜川|渭南|延安|榆林|汉中|安康|商洛"); 
cityArray[27] = new Array("甘肃省","兰州|嘉峪关|金昌|白银|天水|酒泉|张掖|武威|定西|陇南|平凉|庆阳|临夏|甘南"); 
cityArray[28] = new Array("宁夏回族自治区","银川|石嘴山|吴忠|固原"); 
cityArray[29] = new Array("青海省","西宁|海东|海南|海北|黄南|玉树|果洛|海西"); 
cityArray[30] = new Array("新疆维吾尔族自治区","乌鲁木齐|石河子|克拉玛依|伊犁|巴音郭勒|昌吉|克孜勒苏柯尔克孜|博尔塔拉|吐鲁番|哈密|喀什|和田|阿克苏"); 
cityArray[31] = new Array("香港特别行政区","香港特别行政区"); 
cityArray[32] = new Array("澳门特别行政区","澳门特别行政区"); 
cityArray[33] = new Array("台湾省","台北|高雄|台中|台南|屏东|南投|云林|新竹|彰化|苗栗|嘉义|花莲|桃园|宜兰|基隆|台东|金门|马祖|澎湖"); 
cityArray[34] = new Array("其它","北美洲|南美洲|亚洲|非洲|欧洲|大洋洲"); 
   function getCity(currProvince) 
   { 
    //当前 所选择 的 省 
    var currProvincecurrProvince = currProvince; 
    var i,j,k; 
    //清空 城市 下拉选单 
   document.all.selCity.length = 0 ; 
    for (i = 0 ;i <cityArray.length;i++) 
    { 
     //得到 当前省 在 城市数组中的位置 
     if(cityArray[i][0]==currProvince) 
      { 
       //得到 当前省 所辖制的 地市 
      tmpcityArray = cityArray[i][1].split("|") 
       for(j=0;j<tmpcityArray.length;j++) 
       { 
        //填充 城市 下拉选单 
        document.all.selCity.options[document.all.selCity.length] = new Option(tmpcityArray[j],tmpcityArray[j]); 
       } 
      } 
    } 
   } 
 </script> 
</head> 
<body> 
<form id="form1"> 
 <select id="selProvince" onChange = "getCity(this.options[this.selectedIndex].value)"> 
  <option value="">-请选择-</option> 
  <option value="北京市">北京市</option> 
  <option value="上海市">上海市</option> 
  <option value="天津市">天津市</option> 
  <option value="重庆市">重庆市</option> 
  <option value="河北省">河北省</option> 
  <option value="山西省">山西省</option> 
  <option value="内蒙古自治区">内蒙古自治区</option> 
  <option value="辽宁省">辽宁省</option> 
  <option value="吉林省">吉林省</option> 
  <option value="黑龙江省">黑龙江省</option> 
  <option value="江苏省">江苏省</option> 
  <option value="浙江省">浙江省</option> 
  <option value="安徽省">安徽省</option> 
  <option value="福建省">福建省</option> 
  <option value="江西省">江西省</option> 
  <option value="山东省">山东省</option> 
  <option value="河南省">河南省</option> 
  <option value="湖北省">湖北省</option> 
  <option value="湖南省">湖南省</option> 
  <option value="广东省">广东省</option> 
  <option value="广西壮族自治区">广西壮族自治区</option> 
  <option value="海南省">海南省</option> 
  <option value="四川省">四川省</option> 
  <option value="贵州省">贵州省</option> 
  <option value="云南省">云南省</option> 
  <option value="西藏自治区">西藏自治区</option> 
  <option value="陕西省">陕西省</option> 
  <option value="甘肃省">甘肃省</option> 
  <option value="宁夏回族自治区">宁夏回族自治区</option> 
  <option value="青海省">青海省</option> 
  <option value="新疆维吾尔族自治区">新疆维吾尔族自治区</option> 
  <option value="香港特别行政区">香港特别行政区</option> 
  <option value="澳门特别行政区">澳门特别行政区</option> 
  <option value="台湾省">台湾省</option> 
  <option value="其它">其它</option> 
 </select> 
 <select id="selCity"> 
  <option>-城市-</option> 
 </select> 
</form> 
</body> 
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
js自定义select下拉框美化特效
May 12 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
js判断节假日实例代码
Dec 27 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
Javascript 解构赋值详情
Nov 17 Javascript
JavaScript知识点整理
Dec 09 #Javascript
js实现跨域访问的三种方法
Dec 09 #Javascript
详解js跨域原理以及2种解决方案
Dec 09 #Javascript
深入探讨前端框架react
Dec 09 #Javascript
JavaScript中rem布局在react中的应用
Dec 09 #Javascript
js获取鼠标位置实例详解
Dec 09 #Javascript
JavaScript常用基础知识强化学习
Dec 09 #Javascript
You might like
php4的session功能评述(三)
2006/10/09 PHP
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
php商品对比功能代码分享
2015/09/24 PHP
php表单处理操作
2017/11/16 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
Jquery ui css framework
2010/06/28 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python3.x实现发送邮件功能
2018/05/22 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python实现机器人卡牌
2019/10/06 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
美术指导求职信
2014/03/17 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
解除租房协议书
2014/12/03 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android