一、下載Distpicker，將dist下的目錄拷貝到靜態資源下

前端代碼：

<div class="layui-input-inline"> <select name="province" lay-filter="province" id="province" data-province="- 省/自治區/直轄市 -" ></select> </div> <div class="layui-input-inline"> <select name="city" lay-filter="city" id="city" data-city="- 市/區/縣 -"></select> </div>

重點來了，這個庫適配layui，就會出現一個問題。layui會把select和option渲染成多個div，而Distpicker單純是對select和option操作的，一旦layui渲染完成，Distpicker庫對select再怎么操作，渲染后的div都不會有任何改變。

下面，我細致分析一下layui適配Distpicker產生的問題：

1.layui渲染完成后，用戶點擊省級（或市級）select，實際上只是點擊了渲染后的div，所以，庫監聽的select點擊事件根本不會被觸發。所以市級（或縣級）select，并沒有被填充option數據；

2.即使解決了問題1，庫填充了option到select里，layui不進行再次渲染用戶依然看不到聯動的數據。

解決方案：

針對問題1：
layui提供了方法監聽渲染后的select（實際是div）的change事件，當用戶點擊觸發該事件時，我們用代碼再去觸發被渲染前的select的change事件，讓Distpicker庫也知道，用戶改變了select的值。Distpicker再對select中填充option。

針對問題2：
layui提供了相應的方法去再次渲染表單，即form.render()。這個方法也放在渲染后的select的change事件響應后執行。

解決問題的js代碼

form.on('select(province)', function (data) {$("#province").val(data.value).change();form.render();})form.on('select(city)', function (data) {$("#city").val(data.value).change();form.render();})

參考文章

總結

以上是生活随笔為你收集整理的layui搭配Distpicker实现省市县多级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。