js实现城市级联选择,二级选择
代码实例:以下代码可以直接粘贴使用,但里面的城市并不完整。
实现原理是利用 js的onchang方法,调用city.js文件里的changecity()函数,var text = city[index][i].split(“-”); 这个方法是把new Array()数组拆分进text变量数组里,然后text[0]是文本区域中的值,text[1]是选中的值。
1 <script type="text/javascript" src=”city.js”></script> 2 3 <form action=”" method=”post” name=”form2″>省份:<select name=”sf” onchange=”changecity()” > 4 <option selected>选择省份</option> 5 <option value=”江苏省”>江苏省</option> 6 <option value=”北京”>北京</option> 7 <option value=”天津”>天津</option> 8 <option value=”上海”>上海</option> 9 <option value=”重庆”>重庆</option> 10 <option value=”广东省”>广东省</option> 11 <option value=”浙江省”>浙江省</option> 12 <option value=”福建省”>福建省</option></select> 13 城市: 14 <SELECT name=city style=”width:80″> 15 <OPTION>==所在城市==</OPTION> 16 </SELECT> 17 </form>
city.js 代码:
1 // JavaScript Document 2 function changecity(){ 3 index = form2.sf.options.selectedIndex-1; 4 form2.city.length = city[index].length; 5 for(var i = 0;i<city[index].length;i++) 6 { 7 var text = city[index][i].split(“-”); 8 form2.city.options[i].text = text[0]; 9 form2.city.options[i].value =text[1]; 10 } 11 }var city = new Array( 12 new Array( 13 //”江苏省(全部地区)-江苏省(全部地区)”, 14 “江阴市-江阴市”, 15 “无锡市-无锡市”, 16 “宜兴市-宜兴市”, 17 “常州市-常州市”, 18 “南京市-南京市”, 19 “溧水县-溧水县”, 20 “高淳县-高淳县”, 21 “苏州市-苏州市”, 22 “常熟市-常熟市”, 23 “张家港市-张家港市”, 24 “昆山市-昆山市”, 25 “吴江市-吴江市”, 26 “太仓市-太仓市”, 27 “溧阳市-溧阳市”, 28 “金坛市-金坛市”, 29 “南通市-南通市”, 30 “海安县-海安县”, 31 “如东县-如东县”, 32 “启东市-启东市”, 33 “如皋市-如皋市”, 34 “通州市-通州市”, 35 “海门市-海门市”, 36 “镇江市-镇江市”, 37 “丹阳市-丹阳市”, 38 “扬中市-扬中市”, 39 “句容市-句容市”, 40 “徐州市-徐州市”, 41 “丰县-丰县”, 42 “沛县-沛县”, 43 “铜山县-铜山县”, 44 “睢宁县-睢宁县”, 45 “新沂市-新沂市”, 46 “邳州市-邳州市”, 47 “连云港市-连云港市”, 48 “赣榆县-赣榆县”, 49 “东海县-东海县”, 50 “灌云县-灌云县”, 51 “淮安市-淮安市”, 52 “涟水县-涟水县”, 53 “洪泽县-洪泽县”, 54 “盱眙县-盱眙县”, 55 “金湖县-金湖县”, 56 “盐城市-盐城市”, 57 “响水县-响水县”, 58 “滨海县-滨海县”, 59 “阜宁县-阜宁县”, 60 “射阳县-射阳县”, 61 “建湖县-建湖县”, 62 “盐都县-盐都县”, 63 “东台县-东台县”, 64 “大丰市-大丰市”, 65 “扬州市-扬州市”, 66 “宝应县-宝应县”, 67 “仪征县-仪征县”, 68 “高邮市-高邮市”, 69 “江都市-江都市”, 70 “宿迁市-宿迁市”, 71 “宿豫县-宿豫县”, 72 “沭阳县-沭阳县”, 73 “泗阳县-泗阳县”, 74 “泗洪县-泗洪县”, 75 “泰州市-泰州市”, 76 “兴化市-兴化市”, 77 “靖江市-靖江市”, 78 “泰兴市-泰兴市”, 79 “姜堰市-姜堰市”), 80 new Array(“北京-北京”), 81 new Array(“天津-天津”), 82 new Array(“上海-上海”), 83 new Array(“重庆-重庆”), 84 new Array( 85 //”广东省 (全部地区)-广东省 (全部地区)”, 86 “广州-广州”, 87 “深圳-深圳”, 88 “东莞-东莞”, 89 “中山-中山”, 90 “佛山-佛山”, 91 “珠海-珠海”, 92 “惠州-惠州”, 93 “汕头-汕头”, 94 “湛江-湛江”, 95 “潮州-潮州”, 96 “潮阳-潮阳”, 97 “江门-江门”, 98 “汕尾-汕尾”, 99 “茂名-茂名”, 100 “阳江-阳江”, 101 “肇庆-肇庆”, 102 “梅州-梅州”, 103 “云浮-云浮”, 104 “清远-清远”, 105 “韶关-韶关”, 106 “河源-河源”, 107 “揭阳-揭阳”, 108 “其他-其他”), 109 new Array( 110 //”浙江省(全部地区)-浙江省(全部地区)”, 111 “杭州-杭州”, 112 “宁波-宁波”, 113 “温州-温州”, 114 “金华-金华”, 115 “义乌-义乌”, 116 “绍兴-绍兴”, 117 “湖州-湖州”, 118 “余姚-余姚”, 119 “临海-临海”, 120 “萧山-萧山”, 121 “临安-临安”, 122 “诸暨-诸暨”, 123 “嵊泗-嵊泗”, 124 “兰溪-兰溪”, 125 “嘉兴-嘉兴”, 126 “海宁-海宁”, 127 “桐乡-桐乡”, 128 “衢州-衢州”, 129 “上虞-上虞”, 130 “嵊州-嵊州”, 131 “慈溪-慈溪”, 132 “丽水-丽水”, 133 “瓯海-瓯海”, 134 “黄岩-黄岩”, 135 “椒江-椒江”, 136 “其他-其他”), 137 new Array( 138 //”福建省(全部地区)-福建省(全部地区)”, 139 “福州-福州”, 140 “厦门-厦门”, 141 “泉州-泉州”, 142 “漳州-漳州”, 143 “石狮-石狮”, 144 “三明-三明”, 145 “南平-南平”, 146 “莆田-莆田”, 147 “永安-永安”, 148 “邵武-邵武”, 149 “龙岩-龙岩”, 150 “其他-其他”));
转载于:https://www.cnblogs.com/leejersey/archive/2012/12/23/2829768.html
js实现城市级联选择,二级选择相关推荐
- web前端之城市级联
城市级联 最近看了篇不错的博客,效果实现的也不错,但存在细小问题,所以就原作者博客代码基础上进行了细微修改. 说明 原博主代码实现了选择省份,自动对应出地市. 选择地市可自动对应出区县. 但存在的细小 ...
- 中国省份城市级联选择--JavaScript
原文地址为: 中国省份城市级联选择--JavaScript 前一段做了一个小程序居然都用到列表框选择城市,一直都是在里面直接编辑项,这样没做一次都要写那么多的城市名,真是让人有崩溃的冲动,网上也有很多 ...
- php网页增加音乐代码,js给网页加上背景音乐及选择音效的方法
本文实例讲述了js给网页加上背景音乐及选择音效的方法.分享给大家供大家参考.具体实现方法如下: 给网页加上背景音乐,选择音效功能 a{font-size:30pt;color:blue;font-fa ...
- 如果离开一线城市,你会选择如何开始
前些天和大学同学闲聊,东扯西扯谈到一个话题:如果回去发展的话,能干些啥?在互联网上,每隔那么一段时间都会有一波逃离北上广的浪潮,但大家是否真正想过,如果逃离回去自己能干些啥? 首先要说的是如果能待在一 ...
- H5开发:使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述 使用H5.CSS.JS.JQUERY 点击添加图片按钮,从本地选择图片(同名图片不可重复选择),在页面预览选中的图片 点击图片查看大图,点击图片右上角"×"删除此图 点击 ...
- 仿智联招聘首页html源码,模仿智联职位选择,地区选择Js插件
[实例简介] 模仿智联职位选择,地区选择Js插件,界面需要做简单的修改 [实例截图] [核心代码] jquery-plugin-ExtendedBoxy └── jquery-plugin-Exten ...
- 一道JS算法面试题——冒泡、选择排序
JS排序算法 基础排序 冒泡排序 选择排序 面试题 基础排序 今天学习了数据结构,遇到了一个关于算法的面试题,然后从中想到了冒泡排序和选择排序对一个数组从小到大的排序的方法,今天分享给大家,顺便记录下 ...
- json省市区城市级联
约定 省市区三级城市联动效果,选择框默认全部显示,选择后根据实际情况显示或隐藏. 在省得select上加上属性 load-data="330102" 即表示页面需把330102这个 ...
- GeneXus笔记本—城市级联下拉
最近在交流GeneXus的时候 总是会遇到有城市级联下拉的问题 这里就简单做几种方式 供大家参考参考 第一种就是直接绑定关联信息然后在后者的条件模块设定条件即可 具体如下: 首先我们所需要的表为pro ...
最新文章
- Linux多线程管理: 多线程编程
- 南开大学提出最新边缘检测与图像分割算法,精度刷新记录(附开源地址)
- 计算机专业文档写作课件,计算机专业论文写作的方法.ppt
- 网站推广——网站推广专员浅析如何轻松完成网站关键词优化?
- 民用建筑工程给水排水设计深度图样_「安装工程识图」建筑给水排水施工图的识读方法...
- [转载]Memcache内存临界测试
- java 定义方法_java如何定义方法
- hibernate一对多映射实现
- 3389远程连接问题的一个解决办法
- hdu2046-饭卡
- 六种数据格式CSV、 Pickle、MessagePack、HDF5、Feather、 Parquet的比较
- 程序员基础 MySQL数据库开发必备常识
- 【电脑配置】开发人员必备,黑苹果双系统安装教程
- 鸿蒙智慧屏安装apk,亲测华为智慧屏支持安装以下第三方软件,大家赶紧试试!...
- 计算机视觉领域的一些牛人博客,超有实力的研究机构等的网站链接
- 热烈庆祝《Java多线程》上线啦!
- lzx和网页之间脚本交互调试方式
- SQLserver 外键语句出现“引用了无效的表”
- 检测PE文件加壳信息用的特征码
- PreferenceActivity与PreferenceFragment理解
热门文章
- java socket 远程调用_SpringBoot使用Netty实现远程调用的示例
- 挖洞技巧:APP手势密码绕过思路总结
- 《剑指offer》翻转单词顺序列
- 判断回文(Python)
- TensorFlow中padding卷积的两种方式“SAME”和“VALID”
- Elasticsearch教程 elasticsearch Mapping的创建
- python学习笔记(八)类(classes)
- Kubernetes之kubectl常用命令
- Linux下安装Redmine(项目管理软件)
- 外观、体验升级 HUAWEI WATCH 2 Pro成智能手表领航者