中国省市选择插件  ChineseCities

1.原生JS,不依赖jquery,zepto
2.前端学习交流群:814798690

源码查看 点击下载

快速使用

1.引用 ChineseCities.min.js
2.拷贝以下布局结构

<select id="province">
  <option value="请选择城市">请选择省份</option>
</select>
<select id="city">
  <option value="请选择城市">请选择城市</option>
</select>

3.创建ChineseCities对象:

var chineseCities = new ChineseCities({
  'province':'province', //省份ID
  'city':'city', //城市ID
  'hasSelect': function(data){
    console.log(data);
  }//选择后的回调函数
});  

可选参数

参数名 默认值 说明
province  null  省份下拉框ID
city null  城市下拉框ID
hasSelect  function(data){...} 选择后的回调,返回数据{'province':'省份名','city':'城市名'}

案例展示

#Plugin 中国省市选择插件的更多相关文章

  1. 4个好用的JS联动选择插件

    jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...

  2. 基于jquery的城市选择插件

    城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...

  3. 【jquery】多日期选择插件easyui date

    1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/d ...

  4. 关于中国省市的一份js代码

    下面是一份关于中国省市的js代码,搜藏起来,非常有用. var arrCity = [ { name:"请选择", sub:[{name:"请选择"}], ty ...

  5. 移动端城市选择JavaScript插件(基于WG的城市选择插件的修改版本)

    周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互 ...

  6. Webform——中国省市三级联动以及IsPostBack

    首先要明白Webform的运行顺序,当开始启动时候,首先执行的是Page_Load事件, 当点击任意按钮后,每次点击都要先执行一遍Page_Load(在这里Page_Load里面的事件是给数据控件加载 ...

  7. 贴近用户体验的jQuery日期选择插件

    分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览   源码下载 var dateRange = new ...

  8. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  9. 纯原生js移动端日期选择插件

    最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...

随机推荐

  1. java 23种设计模式 深入浅出

    以下内容只作为对自己对知识进行总结,如有引用他人文章会在文段末尾表明出处: Java的23种设计模式 23种设计模式总共可以分为三大类,进行不定期更新总结,将逐步展开介绍自己对设计模式的理解,多多指教 ...

  2. (转)远程连接webservice遇到无法访问的问题解决办法

    原帖:http://stu-xu.i.sohu.com/blog/view/170429191.htm 如果在本地测试webservice可以运行,在远程却显示“测试窗体只能用于来自本地计算机的请求” ...

  3. MySQL删除数据库时的错误(errno: 39)

    由于mysql数据库是默认区分大小写的,部署的时候发现多了一些重复的表,于是就把多余的表删掉了.可是,剩下的重复的表再删除时会提示:表不存在. 于是,想把数据库删掉重新创建,可是,得到了 ERROR ...

  4. bzoj1485: [HNOI2009]有趣的数列(Catalan数)

    一眼卡特兰数...写完才发现不对劲,样例怎么输出$0$...原来模数不一定是质数= =... 第一次见到模数不是质数的求组合数方法$(n,m\leq 10^7)$,记录一下... 先对于$1$~$n$ ...

  5. 调试技巧 ------ printf 的使用技巧

    编译器宏:__FUNCTION__,__FILE__,__LINE__ #define __debug #ifdef __debug //#define debug(format,...) print ...

  6. SqlParameter防止SQL注入

    SQL注入的解决方案有好几种,待我细细研究过之后逐一讲解. 方法一:SqlParameter方法 这里有一篇博客是详细介绍SqlParameter的,可以看看 点我 string sqlStr=&qu ...

  7. <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />

    代码一:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> http-eq ...

  8. HDU 2680 Choose the best route 最短路问题

    题目描述:Kiki想去他的一个朋友家,他的朋友家包括所有的公交站点一共有n 个,一共有m条线路,线路都是单向的,然后Kiki可以在他附近的几个公交站乘车,求最短的路径长度是多少. 解题报告:这道题的特 ...

  9. 02 uni-app框架学习:设置全局样式统一每个页面的背景颜色

    1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page

  10. Javascript - Vue - vue对象

    vue提供了一整套前端解决方案,可以提升企业开发效率 vue的处理过程 app.js 项目入口,所有请求最先进入此模块进行处理 route.js 由app.js调用,处理路由的分发 controlle ...