jQuery省市区镇四级联动插件citypicker.js

所属分类:输入-选择框

 8421  34  查看评论 (7)
jQuery省市区镇四级联动插件citypicker.js ie兼容8

使用方法

引入四个文件

  • jquery.js  (请把这个放首位引入)

  • city-picker.data.js  (全国省市区数据都在这个文件里面)

  • city-picker.js  (js实现功能逻辑)

  • city-picker.css  (省市区县选择器样式,这个也可以不用,可以自己写个更好看的) 

html页面代码:

<div style="position: relative;">
    <input class="form-control" readonly type="text" data-toggle="city-picker" style="width:50%;">
</div>

方法

用data-toggle="city-picker"属性初始化

基本

<div style="position:relative;">
  <input readonly type="text" data-toggle="city-picker">
</div>

自定义占位符

<div style="position:relative;">
  <input readonly type="text" data-toggle="city-picker" placeholder="customized placeholder...">
</div>

响应宽度

<div style="position:relative;">
  <input readonly type="text" data-toggle="city-picker" data-responsive="true" style="width:50%;">
</div>

自定义省/市/区

<div style="position:relative;">
  <input readonly type="text" data-toggle="city-picker" value="江苏省/常州市/溧阳市">
</div>

用$.fn.city-picker方法初始化

基本

$('#target').citypicker();

定制区域

$('#target').citypicker({
  province: '江苏省',
  city: '常州市',
  district: '溧阳市'
});
相关插件-选择框

jquery各大学选择插件

jquery text选择器点击事件弹出层选择学校value赋值
  选择框
 11124  63

最新版自制小清新selsct插件

美化下拉插件,兼容至IE8
  选择框
 9369  68
  选择框
 20838  149

jquery 省市区三级联动选择(原创)

省市区三级联动选择,可以任意改造样式
  选择框
 2382  17

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币

    随心逐流 0
    2018/6/30 19:10:45
    请问一下,选择完成后是哪个方法
    回复
    众唁。 0
    2018/6/27 16:07:14
    移动端iphone上不能用 回复
    恋娇 0
    2018/6/27 15:10:48
    为什么北京选完区之后没有乡镇选项 北京/朝阳区/三环到四环之间 回复
    正在输入... 0
    2018/5/28 18:44:03
    没有回调函数,改变input 值得时候触发事件; 回复
    JaniceLian 0
    2018/5/18 16:22:06
    当第一次3级选项都选好后,第二次修改的时候,修改了省,后面直接跟了第一次选择的区县值,建议在getText()方法中添加else{return false;} 回复
    15920219367 0
    2018/4/18 14:03:27
    <input readonly type="text" data-toggle="city-picker" value="江苏省/常州市/溧阳市">

     隔2S就没了这个默认值

    回复
    ? ?灯火阑珊? 0
    2018/3/19 19:04:07
    这个怎么动态获取选择的值啊,就是当前input的change事件触发获取当前选择的值 回复
取消回复