layui的select聯(lián)動實現(xiàn)代碼
要實現(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)動實現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
網(wǎng)站發(fā)布后Bootstrap框架引用woff字體無法正常顯示的解決方法
這篇文章主要介紹了網(wǎng)站發(fā)布到IIS后Bootstrap框架引用的woff字體無法正常顯示的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11
javaScript window.event.keyCode 集合與測試方法
javaScript window.event.keyCode 集合,對于事件的代碼獲取可以用腳本監(jiān)聽來實現(xiàn)。2010-05-05
xmlplus組件設(shè)計系列之分隔框(DividedBox)(8)
xmlplus 是一個JavaScript框架,用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus布局類組件之分隔框,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05
JavaScript實現(xiàn)鼠標(biāo)懸浮頁面切換效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)鼠標(biāo)懸浮頁面切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03
js阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)
下面小編就為大家?guī)硪黄猨s阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05

