页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

jquery实现的交互体验更友好省市区三级联动插件

菜单导航 表单 HTML我帮您 1年前  次浏览

City Picker是jquery实现的交互体验更友好省市区三级联动插件,下拉面板式省市区三级联动jquery插件,可以无刷新省市区联动效果,视觉更清爽,交互体验更友好。

jquery实现的交互体验更友好省市区三级联动插件

Options

  • Change the default options with $().citypicker(options).
  • Change the global default options with $.fn.citypicker.setDefaults(options).

simple

  • Type: Boolean
  • Default: false

Make the address level more simple, e.g. 内蒙古 instead of 内蒙古自治区.

level

  • Type: String
  • Default: district

Only province, province + city, or province + city + district.

responsive

  • Type: Boolean
  • Default: false

make the drop down and mask span responsive on width.

placeholder

  • Type: Boolean
  • Default: 请输入省/市/区

Show placeholder (with an <option> element).

province

  • Type: String
  • Default: null

Defines the initial value of province. If it is a existing province in city-picker.data.js, it will be selected. If not, it will be used as a placeholder.

city

  • Type: String
  • Default: null

Defines the initial value of city. If it is a existing city under the selected province, it will be selected. If not, it will be used as a placeholder.

district

  • Type: String
  • Default: null

Defines the initial value of district. If it is a existing district under the selected city, it will be selected. If not, it will be used as a placeholder.

Methods

reset()

Reset the selects to the initial states (Undo changed).

Examples:

$().citypicker('reset');

destroy()

Destroy the city-picker instance, but keep the selected districts.

If you want to remove the selected districts, you can call reset method first and then call this method.

No conflict

If you have to use other plugin with the same namespace, just call the $.fn.city-picker.noConflict method to revert to it.

<script src="other-plugin.js"></script>
<script src="city-picker.js"></script> <script>  $.fn.citypicker.noConflict();  // Code that uses other plugin's "$().citypicker" can follow here. </script>

Browser support

  • Chrome (latest 2)
  • Firefox (latest 2)
  • Internet Explorer 8+
  • Opera (latest 2)
  • Safari (latest 2)

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/city-picker.data.js"></script>
<script src="/path/to/city-picker.js"></script>

<div data-toggle="city-picker">
   <input readonly type="text" data-toggle="city-picker" >
</div>

$("#city-picker2").citypicker({
  province: "江苏省",
  city: "常州市",
  district: "溧阳市"
});

相关链接

发表评论