省市区三级联动控件，city-picker的简单使用

Github链接：https://github.com/tshi0912/city-picker

 

一、下载city-picker的压缩文件之后，打开dist文件夹

 

二、里面有我们需要的文件

三、首先引入css/js文件，这里JQ是必须存在的，建议使用压缩版的css/js文件

<link rel="stylesheet" href="city-picker.css"/>
<script src="jquery.js"></script>
<script src="city-picker.data.js"></script>
<script src="city-picker.js"></script>

 

四、注意一下他的html的结构，最外层的需要position:relative;，因为弹出窗是定位的盒子

<div style="position:relative;">
    <input readonly type="text">
</div>

五、使用方法

1、data-toggle=”city-picker”是初始化属性，一个简单的【省/市/区】的三级联动完成了

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

 

 

 

2、如果只想显示【省市】二级联动可以这样写

<div style="position: relative;">
    <input readonly type="text" data-toggle="city-picker" placeholder="请选择省/市" data-level="city" >
</div>

 

3、设置自定义的占位符

<div style="position: relative;">
    <input readonly type="text" data-toggle="city-picker" placeholder="点击从下拉面板中选择省/市/区">
</div>

 

 

4、简称的地址 《自治区，市，区，县》都消失了，只有每个地方的简称

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

 

5、宽度自定义，你可以再input上写个style来定义，有时候他的宽度不够

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

 

 

6、我们很多时候还需要一个初始值，别忘了要写对文字和所属关系哦

<div style="position: relative;">
    <input readonly type="text" data-toggle="city-picker" value="内蒙古自治区/呼和浩特市/赛罕区">
</div>

 

7、使用js的方法来初始化

<div style="position: relative;">
    <input id="city-picker1" readonly type="text">
</div>
<script type="text/javascript">
    $("#city-picker1").citypicker();
</script>

 

8、也可以使用js去初始化一个地址

<div style="position: relative;">
    <input id="city-picker2" readonly type="text">
</div>
<script type="text/javascript">
    $("#city-picker2").citypicker({
        province: "内蒙古自治区",
        city: "呼和浩特市",
        district: "赛罕区"
    });
</script>