js城市联动选择器
<html> <head> <META charset="utf8"> <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script> (function($) { $.fn.areaSelInit = function() { return $(this).html("<option>请选择</option>"); }; $.area = function(data,sel) { /** 初始化 **/ $("#province").areaSelInit(); $("#city").areaSelInit(); $("#county").areaSelInit(); /** 选中特定值 **/ $.each(data, function(p,x) { var s1 = ''; if(undefined!=sel){ s1 = (p==sel[0]) ? 'selected' : ''; } $("#province").append("<option "+s1+">" + p + "</option>"); // 省 if(undefined!=sel){ if ($("#province option:selected").text()==p) { $.each(x,function(c,cx){ var s2 = ''; s2 = (c==sel[1]) ? 'selected' : ''; $("#city").append("<option "+s2+">" + c + "</option>"); // 市 if ($("#city option:selected").text()==c) { $.each(cx.split(","),function(){ var s3 = ''; s3 = (this==sel[2]) ? 'selected' : ''; $("#county").append("<option "+s3+">" + this + "</option>"); // 区 }); } }); } } }); /** onchange事件 **/ $("#province").change(function() { $("#city").areaSelInit(); $("#county").areaSelInit(); $.each(data, function(p, x) { if ($("#province option:selected").text() == p) { $.each(x, function(c, cx) { $("#city").append("<option>" + c + "</option>"); // 市 }); $("#city").bind("change", function() { $("#county").areaSelInit(); $.each(x, function(c, cx) { if ($("#city option:selected").text() == c) { $.each(cx.split(","), function() { $("#county").append("<option>" + this + "</option>"); // 区 }); } }); }); } }); }); }; })(jQuery); $(function() { var data = {北京: {北京: "东城,西城,海淀,宣武,丰台" }, 江苏: {南京: "江宁,六合,下关,浦口", 无锡: "北塘,滨湖,江阴,宜兴" }, 广东: {广州: "越秀区,东山区,海珠区,荔湾区,天河区,白云区,黄埔区,芳村区,番禺区,花都区,增城市,从化市", 揭阳: "榕城区,揭东县,揭西县,普宁市" } }; var sel = ['广东','揭阳']; // 或: var sel = []; $.area(data,sel); }); </script> </head> <body> <select id="province"><option>请选择</option></select> <select id="city"><option>请选择</option></select> <select id="county"><option>请选择</option></select> </body> </html>
;
js城市联动选择器的更多相关文章
- 全国三级城市联动 js版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS中简单的二级城市联动
代码奉上: <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
- [js开源组件开发]js手机联动选择日期 开源git
js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...
- [JS]以下是JS省市联动菜单代码
以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...
- JQUERY省、市、县城市联动选择
JQUERY 插件开发——CITYLINKAGE(省.市.县城市联动选择) 第一部分:背景 开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前 ...
- JS省市区联动效果
省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...
- js 多级联动(省、市、区)
js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...
- Jquery 插件开发——citylinkage(省、市、县城市联动选择)
第一部分:背景 开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前呢,一直想写这个插件,然后错过了一个写这个插件的机会(这个得回顾到很久以前了. ...
- 省市区js三级联动(原创)
看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...
随机推荐
- ASP.NET MVC学习---(六)CRUD例子补充
在之前,我们使用mvc做了一个crud的小例子 整个项目过程应该是能够很容易理解的 通过这个例子我们可以大概的了解mvc的基本使用方法 但是由于篇幅限制(还不如说自己懒不想写那么长...) 没有能够在 ...
- JS-只能输入中文和英文
<span style="font-family:KaiTi_GB2312;">转自:<a target=_blank href="http://www ...
- www.mentalis.org/
Top Downloads Here are the top downloads (within the last 24 hours): 1. Proxy2. IniReader3. ProxySoc ...
- react-native 项目实战 -- 新闻客户端(6) -- 完善ListView头部视图
1.因为需要定时器,所以我们要cd到当前项目根目录下安装这个类库: $ npm i react-timer-mixin --save 2.Component/ScrollImage.js /** * ...
- SQL - 获取多机构最近相同节点
-- Create Branches Table create table Branches ( BranchCode ) ,BranchName ) ,L0BCode ) ,L1BCode ) ,L ...
- 使用 JavaScript开发的跨平台音乐、书籍播放器
代码地址如下:http://www.demodashi.com/demo/12542.html 演示效果 歌曲推荐界面 歌手搜索界面 歌词预览界面 书籍推荐界面 代码实现过程 首页代码: 'use s ...
- 02-1设置第一启动项--电脑怎么进入BIOS的方法集合
电脑怎么进入BIOS的方法集合 很多时候为了对电脑进行相关设置,我们必须进入电脑的bios界面,但是不同的电脑进入bios的方法各不相同,小编今天就在这儿将各种电脑进入bios的方法汇总一下,希望对你 ...
- Android 网络状态的监控
1 http://www.cnblogs.com/qingblog/archive/2012/07/19/2598983.html 2
- Android网络框架Volley
Volley是Google I/O 2013推出的网络通信库,在volley推出之前我们一般会选择比较成熟的第三方网络通信库,如: android-async-http retrofit okhttp ...
- php优化(php.ini)
PHP优化 ------------------------------------- 尽量选择php5.4及以上的版本,里面很多优化参数已经移除了相比以前版本 1.引擎解析优化和加速 1)eac ...