中国省市选择插件  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. 词法作用域 vs 动态作用域

    词法作用域 vs 动态作用域 链接:https://www.jianshu.com/p/cdebb5965000 scheme是一门采用词法作用域(lexical scoping)的lisp方言,这个 ...

  2. 【转】linux下各文件夹的结构说明及用途介绍

    linux下各文件夹的结构说明及用途介绍: /bin:二进制可执行命令. /dev:设备特殊文件. /etc:系统管理和配置文件. /etc/rc.d:启动的配 置文件和脚本. /home:用户主目录 ...

  3. hdu5242 Game (贪心+dfs序)

    dfs序后用线段树来记每个节点的前缀和 每次找一个前缀和最大的节点,然后把它到根的路径上的每个之前没被走过的点 对应的dfs序的区间 减掉那个点的权值 每个点最多被减一次,复杂度是$O(nlogn)$ ...

  4. 【POJ2631】Roads in the North 树的直径

    题目大意:给定一棵 N 个节点的边权无根树,求树的直径. 代码如下 #include <cstdio> #include <algorithm> using namespace ...

  5. 转头条:阿里p7架构师:三年经验应该具备什么样的技能?

    问:工作中,有时候实现一个功能,会去看有没有现成的轮子可用.对于重复造轮子与改造轮子有什么看法? 答:一定会的,其实这也是一个提高技术能力的方法,比如今天想做个日期转换的功能,JDK8有日期的新特性就 ...

  6. 71. Simplify Path(M)

    71. Simplify Path Given an absolute path for a file (Unix-style), simplify it. For example, path = & ...

  7. 前端必须掌握的30个CSS选择器

    也许你已经学会了CSS的三个简单常用的选择器:#ID,.class,标签选择器,可是这些就足够了吗?随着CSS3的到来,作为前端开发者需要掌握下面三十个基本的选择器,这样才可以在平时开发中得心用手. ...

  8. [转载]Supporting OData $inlinecount with the new Web API OData preview package

    http://www.strathweb.com/2012/08/supporting-odata-inlinecount-with-the-new-web-api-odata-preview-pac ...

  9. B - C Looooops POJ - 2115 (扩展欧几里得)

    题目链接:https://cn.vjudge.net/contest/276376#problem/B 题目大意:for( int  i= A ; i != B; i+ = c ),然后给你A,B,C ...

  10. Python 入门基础2 --基本数据类型、运算符

    本节目录 一.IDE(集成环境的安装) 二.基本数据类型 三.输入输出 四.运算符 五.后期补充内容 一.IDE(集成环境的安装) 安装pycharm 注:快捷键: 1.ctrl + ? :注释此行, ...