layui的select聯(lián)動實(shí)現(xiàn)代碼
要實(shí)現(xiàn)聯(lián)動效果注意兩點(diǎn):
第一要可以監(jiān)聽到select的change事件;
第二異步加載的內(nèi)容,需要重新渲染后才可以 正常使用。
html結(jié)構(gòu):
<form class="layui-form batchinput-form" action="" id="box-form"> <div class="layui-form-item" > <div class="layui-input-inline"> <label class="layui-form-label">所在省份:</label> <div class="layui-input-block" > <select name="province" id="province" lay-filter="myselect"> <option value="">請選擇省份</option> <#list province as provincelist> <option value="${provincelist.areaId}">${provincelist.fullname}</option> </#list> </select> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-inline"> <label class="layui-form-label">所在城市 :</label> <div class="layui-input-block"> <select name="City" id="City" lay-filter="myselect2" > </select> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-inline"> <label class="layui-form-label">所在區(qū)域 :</label> <div class="layui-input-block"> <select name="Area" id="Area" lay-filter="myselect3"> </select> </div> </div> </div> </form>
js:
layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; form.on('select(myselect)', function(data){ var areaId=(data.value).replaceAll(",",""); $.ajax({ type: 'POST', url: '/shopInfo/findCity', data: {areaId:areaId}, dataType: 'json', success: function(data){ $("#City").html(""); $.each(data, function(key, val) { var option1 = $("<option>").val(val.areaId).text(val.fullname); $("#City").append(option1); form.render('select'); }); $("#City").get(0).selectedIndex=0; } }); }); });
1.select的chage監(jiān)聽事件使用
form.on('select(myselect)', function(data){}) 其中myselect是select的 lay-filter屬性值
2.數(shù)據(jù)異步加載到select的option中之后,點(diǎn)擊該select會發(fā)現(xiàn)layui的選中效果不起作用,需要使用form.render('select');重新渲染一次,就可以正常使用。
以上這篇layui的select聯(lián)動實(shí)現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08JS+jQuery實(shí)現(xiàn)注冊信息的驗(yàn)證功能
本文通過實(shí)例代碼給大家分享了基于js+jquery實(shí)現(xiàn)的注冊信息驗(yàn)證功能,代碼簡單易懂,非常不錯,具有參考借鑒價(jià)值,需要的朋友參考下吧2017-09-09網(wǎng)站發(fā)布后Bootstrap框架引用woff字體無法正常顯示的解決方法
這篇文章主要介紹了網(wǎng)站發(fā)布到IIS后Bootstrap框架引用的woff字體無法正常顯示的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11javaScript window.event.keyCode 集合與測試方法
javaScript window.event.keyCode 集合,對于事件的代碼獲取可以用腳本監(jiān)聽來實(shí)現(xiàn)。2010-05-05xmlplus組件設(shè)計(jì)系列之分隔框(DividedBox)(8)
xmlplus 是一個JavaScript框架,用于快速開發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus布局類組件之分隔框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮頁面切換效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮頁面切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03js阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)
下面小編就為大家?guī)硪黄猨s阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05