一、下載Distpicker，將dist下的目錄拷貝到靜態(tài)資源下

前端代碼：

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

重點(diǎn)來了，這個(gè)庫(kù)適配layui，就會(huì)出現(xiàn)一個(gè)問題。layui會(huì)把select和option渲染成多個(gè)div，而Distpicker單純是對(duì)select和option操作的，一旦layui渲染完成，Distpicker庫(kù)對(duì)select再怎么操作，渲染后的div都不會(huì)有任何改變。

下面，我細(xì)致分析一下layui適配Distpicker產(chǎn)生的問題：

1.layui渲染完成后，用戶點(diǎn)擊省級(jí)（或市級(jí)）select，實(shí)際上只是點(diǎn)擊了渲染后的div，所以，庫(kù)監(jiān)聽的select點(diǎn)擊事件根本不會(huì)被觸發(fā)。所以市級(jí)（或縣級(jí)）select，并沒有被填充option數(shù)據(jù)；

2.即使解決了問題1，庫(kù)填充了option到select里，layui不進(jìn)行再次渲染用戶依然看不到聯(lián)動(dòng)的數(shù)據(jù)。

解決方案：

針對(duì)問題1：
layui提供了方法監(jiān)聽渲染后的select（實(shí)際是div）的change事件，當(dāng)用戶點(diǎn)擊觸發(fā)該事件時(shí)，我們用代碼再去觸發(fā)被渲染前的select的change事件，讓Distpicker庫(kù)也知道，用戶改變了select的值。Distpicker再對(duì)select中填充option。

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

解決問題的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();})

參考文章

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。