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 內的代碼，再重新打開，可以發現顯示正常了