[js学习笔记]城市选择控件(双下拉框选择不同城市列表)
来源:互联网 发布:重置sql密码用户名 编辑:程序博客网 时间:2024/05/02 04:36
一 遇到问题
用JS实现下拉框选择城市的效果,原本没什么高深技术,但是同事遇到个问题:页面上需要两个下拉框,一个显示出差的起点城市,一个显示出差的终点城市,但是不论怎么设置预设值(就是预先设置好的可选城市列表),每次起点和终点都只能选到其中一个列表。
举例:起点城市设置为:大理、敦煌、鄂尔多斯;终点设置为北京、重庆,运行后发现不论是起点还是终点都只能选北京、重庆。
二 经过研究,问题解决
经过研究,问题解决,直接贴代码,用JS实现双下拉框选择城市的效果,两个下拉框,分别选择两个不同的城市列表,城市列表可以动态设置,还支持按首字母分组,注释处就是在原著的基础上修改的内容,原著是另外的大牛写的,同事直接使用时遇到上述问题,我仅是在其基础上修改,感谢原作者。
原文引自http://www.cnblogs.com/NNUF/archive/2012/07/13/2590877.html
完整代码打包下载提供http://download.csdn.net/detail/xiangcns/9274417
三 页面显示效果
第一个下拉框:
第二个下拉框:
四 HTML文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Demo</title> <link rel="stylesheet" href="citySelector.css"> <style type="text/css"> .cityinput{ border-width: 1px; border-style: solid; border-color: #666 #ccc #ccc #666; height: 24px; line-height: 24px; width: 175px; font-size: 12px; padding-left: 2px; background: url(http://img02.taobaocdn.com/tps/i2/T1EPyLXm0hXXXXXXXX-200-100.png) no-repeat 150px 5px; } </style></head><body><input type="text" class="cityinput" id="citySelect" value="城市名"><br/><input type="text" class="cityinput" id="citySelect1" value="城市名"><script src="citySelector.js" type="text/javascript"></script><script type="text/javascript"> var iString = ['大理|dali|dl', '敦煌|dunhuang|dh', '鄂尔多斯|eerduosi|eeds']; var test1=new Vcity.CitySelector({input:'citySelect'},iString); var jString = ['北京|beijing|bj','重庆|chongqing|cq']; var test2=new Vcity.CitySelector({input:'citySelect1'},jString);</script></body></html>
0 0
- [js学习笔记]城市选择控件(双下拉框选择不同城市列表)
- Android 城市列表选择控件
- 省份 城市 选择列表
- 城市选择控件
- JS省份和城市选择控件
- 城市选择js效果
- jquery选择省份城市下拉框
- 利用下拉框选择省份、城市、地区
- ajax联动下拉选框(地区城市选择)【php】
- 省市二级联动 通过省份选择城市 JS的简单应用 二级下拉列表
- winform 实现选择城市列表
- 城市定位和选择列表
- 根据选择下拉框选择省份动态显示城市
- 城市地区级联二级下拉选择菜单js特效
- Android 城市选择万能控件
- Javascript 实现城市选择控件
- 城市选择
- 城市选择
- Objective-C运行时定义的几种重要的类型
- Objective-c:内存管理
- LightOJ 1007 Mathematically Hard
- 欢迎使用CSDN-markdown编辑器
- 【python】xml Elementtree 学习一
- [js学习笔记]城市选择控件(双下拉框选择不同城市列表)
- LayoutInflater
- 将maven项目自动部署至私有nexus maven仓库
- 【南大软院大神养成计划:第一天】种下21天,收获不一样的自己——前端养成启程!
- lightoj1210Efficient Traffic System
- iOS宏定义
- iOS图文混排
- gmock为什么只能支持虚函数(其实也不准确)
- 对iOS的主要框架的介绍