一个省市区的联动选择插件,基于jquery+腾讯api行
jquery-city-picker
一个省市区的联动选择插件,基于jquery+腾讯api行政区划接口数据 演示demo
Use在浏览器端依次引入如下三个文件:
<script src="path/to/jquery-1.11.3.min.js"></script>
<script src="path/to/areaData.min.js"></script>
<script src="path/to/jquery.citypicker.min.js"></script>
实例化对象
$(function(){
new CityPicker().init();
});
注意:为保证正常加载插件数据,需在dom加载完成后实例化对象,即在$(document).ready()
内实例化对象。
html的代码片段如下所示:
<select name="province" id="province" data-province="北京"></select>
<select name="city" id="city" data-city="北京"></select>
<select name="district" id="district" data-district="朝阳区"></select>
注意:
此插件只针对select
标签和其option
标签有效,请不要用于其他的HTML标签中。
默认省市区的select
的id属性分别为province
, city
, district
, 也可以在实例化对象时自由配置id
属性值,如:
new CityPicker({
provinceId: 'xxxx',
cityId: 'xxxx',
districtId: 'xxxx'
}).init();
通过为各select
添加data-province
, data-city
, data-district
属性,实现初始值设置功能。
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。