Layui 使用 citypicker 省市区级联选择地址

1.进入 Layui 第三方组件平台下载该拓展组件

2.写一个测试 Demo

代码结构树如下，extend 目录下加入我们刚下载的 citypicker 拓展组件

先记得在 head 内引入 css 和 js 文件

	<script src="plugin/layui/extend/city-picker/city-picker.data.js"></script>
	<link rel="stylesheet" type="text/css" href="plugin/layui/extend/city-picker/city-picker.css">

再随便写一个 form 表单

<form class="layui-form layui-form-pane">
	<div class="layui-form-item layui-col-md8">
		<label class="layui-form-label">地址：</label>
		<div class="layui-input-block">
			<input type="text" autocomplete="on" class="layui-input" id="address" name="city-picker" readonly="readonly" data-toggle="city-picker" placeholder="请选择">
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-inline">
			<button class="layui-btn" lay-submit lay-filter="citypickerDemo">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</form>

最后加入 js 代码

<script type="text/javascript">
	layui.extend({
		citypicker:'{/}./plugin/layui/extend/city-picker/city-picker'
	}).use(['jquery','citypicker','form'],function(){
		var $ = layui.$,
		form = layui.form,
		citypicker = layui.citypicker;

		var cityPicker = new citypicker("#address",{
			provincename:"provinceId",
               cityname:"cityId",
               districtname: "districtId",
               level: 'districtId',// 级别
		})
	});
</script>

3.结果查看及补充

再细化一下 html 之后，我们在浏览器打开该网页，发现虽然可以选择地址了，但是右侧有个空白的地方，应该是哪里出问题

这时我们打开开发者工具看下，发现有个资源未加载成功

我们用元素选择器选择那个空白的地方，可以看到那个位置本来是要加载一个 png，却没有找到

我们可以在网络上找一张 png，放到该 css 同层文件夹内，然后修改 css 内的代码，再重新打开，可以发现显示正常了