关闭

[js学习笔记]城市选择控件(双下拉框选择不同城市列表)

标签: javascript控件
3238人阅读 评论(0) 收藏 举报
分类:

一  遇到问题

用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
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

html中select控件(省份与城市关联)

html代码: ... ... javascript代码:     var list1 = new Array;     var list2 = new Array;   ...
  • wyzlwyzl
  • wyzlwyzl
  • 2011-11-01 15:23
  • 24605

js获取列表控件某行下拉框的选定值

列表中每行有多个下拉框,在后台databound中调用前台的脚本函数,传行索引,前台接收索引获取指定行的特定下拉框,并取值,代码如下: 后台: protected void lpgPr...
  • baobaolaogong
  • baobaolaogong
  • 2015-09-02 16:46
  • 1046

如何使用js完成下拉列表左右选择

在网站后台中,有2个下拉列表(一个显示已经售完的商品,一个显示已有的商品),如果已有的商品卖完缺货后,就需要放到已售完那个下拉列表中去,效果如图。 要完成这样的效果有以下几步 第一步:确定事件(单击...
  • burtquan
  • burtquan
  • 2016-09-08 22:15
  • 352

JS省份和城市选择控件

city.js var pc = new Object(); pc['北京市'] = new Array('朝阳区', '海淀区', '通州区', '房山区', '丰台区', '昌平区...
  • abld99
  • abld99
  • 2016-03-17 11:00
  • 7130

js城市选择控件

  • 2015-11-16 21:22
  • 9KB
  • 下载

html下拉框之间的联动------一级分类和二级分类

html/js代码如下: 湖北 广东 黄冈 武汉 function change() { var x = document.getElementBy...
  • stpeace
  • stpeace
  • 2016-02-26 22:00
  • 15567

javascript 根据下拉框选择显示不同的DIV

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1        在前面的文章...
  • cngkqy
  • cngkqy
  • 2007-11-09 11:41
  • 15942

HTML5手机三级联动城市选择代码

效果浏览:http://sc.chinaz.com/jiaoben/160906099390.htm 要在GOOGLE浏览器下的手机模拟器中才能看到效果 官方:https://gi...
  • haibo0668
  • haibo0668
  • 2016-11-22 11:54
  • 9156

HTML5+CSS3 城市选择器

  • 2016-06-16 14:47
  • 85KB
  • 下载

html5省市区选择控件基于mobiscroll例子

  • 2016-02-20 14:24
  • 238KB
  • 下载
    个人资料
    • 访问:195862次
    • 积分:2031
    • 等级:
    • 排名:千里之外
    • 原创:65篇
    • 转载:23篇
    • 译文:1篇
    • 评论:122条
    文章分类
    最新评论