#JS 中国省市选择插件

中国省市选择插件  ChineseCities

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

下载地址

https://github.com/chaorenzeng/ChineseCities

快速使用

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);
  }//选择后的回调函数
});  

API文档

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

案例展示

原文地址:https://www.cnblogs.com/KevinTseng/p/9680175.html

时间: 2024-10-25 05:02:06

#JS 中国省市选择插件的相关文章

laydate.js 月份区间选择插件

laydate.render({ elem: '#reservation2' , type: 'month' , range: true, //format: '2018/09', theme: '#3c8dbc', value:'2018-09 - 2018-09', // value: time, done: function(value, startDate, endDate){ // 回调函数 console.log(value); console.log(startDate.year

省市选择

留一个比较完整的省市选择的做法 数据: var CITYS = { "北京": ["北京"], "上海": ["上海"], "天津": ["天津", "塘沽"], "重庆": ["重庆", "涪陵", "江津", "巫山"], "河北": [&quo

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

jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的JS省市联动菜单封装类,也是使用方法最简单的省市联动菜单.不过作者已经很久没更新过地址库的数据了. jQuery Dependent Selects jQuery Dependent Selects只需要在option中指明各层级之间的依赖关系,就可以自动生成多级联动下拉菜单.在小型的项目里是个不错的

Angular Js -moment Picker 时间插件(时间段选择)

Angular Js -moment Picker  时间插件(时间段选择) 一.moment Picker  插件的下载.引用及配置就不在多说了,直接暴力上代码 二.Html <span>{{ctrl.newchoose}}</span> <span id='#showEndTimeError' placeholder="请选择日期" moment-picker="ctrl.chooseFormatted" format="

jquery.chosen.js下拉选择框美化插件项目实例

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果 完成效果如下 实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos

js selection省市2级级联菜单

主要分html部分和js部分 ,函数的参数为空时就是初始化状态,若要加载从后台读取数据的数据给option一个选中的初始状态的话,就可以给定参数即可,一下案例中给定了参数. city.html 页面 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <

mobiscroll日期选择插件移动端插件文本选择插件

移动端选择插件mobiscroll的使用demo 一开始是弄个日期选择的插件,网上看到这个mobiscroll这个插件,然后各种下各种找demo,最后自己研究了一天下面把自己项目的demo拔出来分享给大家(以及文件下载),多多海涵,如果大家看了我的这文章有更好的写法还望赐教~ 首先是常用的日期使用: HTML部分: <li id="birthday"> <div class="mbase-menu-title">生日</div>

基于jquery的城市选择插件

城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. 1 /* 2 *基于jquery的城市选择插件 3 *author:youziclub 4 *2015-4-22 5 */ 6 ;(function($){ 7 $.fn.city=function(options){ 8 // 城市信息 9 var nav=['热门','A-G','H-L','M-T','W-Z','其他']; 10 var

jquery js javascript select 无限级 插件 优化foxidea版

<!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> <title></title> <sc