layui的select聯(lián)動(dòng)實(shí)現(xiàn)代碼

更新時(shí)間：2019年09月28日 09:35:38 作者：一天一天積累

今天小編就為大家分享一篇layui的select聯(lián)動(dòng)實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

要實(shí)現(xiàn)聯(lián)動(dòng)效果注意兩點(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="">請(qǐng)選擇省份</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會(huì)發(fā)現(xiàn)layui的選中效果不起作用，需要使用form.render('select');重新渲染一次，就可以正常使用。

以上這篇layui的select聯(lián)動(dòng)實(shí)現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)html轉(zhuǎn)pdf的三種方法詳解
近期項(xiàng)目需要實(shí)現(xiàn)將?html?頁面轉(zhuǎn)換成?pdf?報(bào)告的需求,經(jīng)過一番調(diào)研以及結(jié)合過往經(jīng)驗(yàn),發(fā)現(xiàn)了三種技術(shù)方案,下面我們就來看看它們的具體實(shí)現(xiàn)步驟吧
2024-02-02
JavaScript中的相等操作符使用詳解
JavaScript 中的相等操作符詳解，包括 [] == []、[] == ![]、{} == !{}幾個(gè)操作符,需要的朋友可以參考下
2019-12-12
javascript將異步校驗(yàn)表單改寫為同步表單
這篇文章主要介紹了javascript將異步校驗(yàn)表單改寫為同步表單,需要的朋友可以參考下
2015-01-01
JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
Bootstrap Table是輕量級(jí)的和功能豐富的以表格的形式顯示的數(shù)據(jù)，支持單選，復(fù)選框，排序，分頁,顯示/隱藏列,固定標(biāo)題滾動(dòng)表,響應(yīng)式設(shè)計(jì)，Ajax加載JSON數(shù)據(jù)，點(diǎn)擊排序的列，卡片視圖等。本文給大家介紹JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】，一起學(xué)習(xí)吧
2016-05-05
bootstrap提示標(biāo)簽、提示框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了bootstrap提示標(biāo)簽、提示框的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
一文入門Webpack文件指紋
文件指紋是文件打包后輸出的文件名的后綴，通常用來做一些文件的版本管理，文中給大家提到了幾種文件指紋的設(shè)置用法，對(duì)Webpack文件指紋相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-02-02
JavaScript實(shí)現(xiàn)簡單MD5加密的腳本分享
MD5信息摘要算法是一種被廣泛使用的密碼散列函數(shù)，可以產(chǎn)生出一個(gè)128位（16字節(jié)）的散列值（hash value），用于確保信息傳輸完整一致。本文將用JavaScript實(shí)現(xiàn)簡單MD5加密，感興趣的可以了解一下
2022-10-10
淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點(diǎn)思考
這篇文章主要介紹了淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點(diǎn)思考，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01
Electron?自定義窗口桌面時(shí)鐘實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Electron?自定義窗口桌面時(shí)鐘實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
JS實(shí)現(xiàn)下拉菜單列表與登錄注冊彈窗效果
下面小編就為大家?guī)硪黄狫S實(shí)現(xiàn)下拉菜單列表與登錄注冊彈窗效果。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08