欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年09月28日 09:35:38   作者:一天一天積累  
今天小編就為大家分享一篇layui的select聯(lián)動實(shí)現(xiàn)代碼,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧

要實(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)擊文本框改變背景顏色

    JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • JS+jQuery實(shí)現(xiàn)注冊信息的驗(yàn)證功能

    JS+jQuery實(shí)現(xiàn)注冊信息的驗(yàn)證功能

    本文通過實(shí)例代碼給大家分享了基于js+jquery實(shí)現(xiàn)的注冊信息驗(yàn)證功能,代碼簡單易懂,非常不錯,具有參考借鑒價(jià)值,需要的朋友參考下吧
    2017-09-09
  • JavaScript對象屬性操作實(shí)例解析

    JavaScript對象屬性操作實(shí)例解析

    這篇文章主要介紹了JavaScript對象屬性操作實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-02-02
  • 網(wǎng)站發(fā)布后Bootstrap框架引用woff字體無法正常顯示的解決方法

    網(wǎng)站發(fā)布后Bootstrap框架引用woff字體無法正常顯示的解決方法

    這篇文章主要介紹了網(wǎng)站發(fā)布到IIS后Bootstrap框架引用的woff字體無法正常顯示的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • javaScript window.event.keyCode 集合與測試方法

    javaScript window.event.keyCode 集合與測試方法

    javaScript window.event.keyCode 集合,對于事件的代碼獲取可以用腳本監(jiān)聽來實(shí)現(xiàn)。
    2010-05-05
  • xmlplus組件設(shè)計(jì)系列之分隔框(DividedBox)(8)

    xmlplus組件設(shè)計(jì)系列之分隔框(DividedBox)(8)

    xmlplus 是一個JavaScript框架,用于快速開發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus布局類組件之分隔框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • js防抖和節(jié)流的深入講解

    js防抖和節(jié)流的深入講解

    這篇文章主要給大家介紹了關(guān)于js防抖和節(jié)流的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮頁面切換效果

    JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮頁面切換效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮頁面切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • js阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)

    js阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)

    下面小編就為大家?guī)硪黄猨s阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • uniapp中如何修改圖標(biāo)和名稱

    uniapp中如何修改圖標(biāo)和名稱

    這篇文章主要給大家介紹了關(guān)于uniapp中如何修改圖標(biāo)和名稱的相關(guān)資料,uni-app是一個使用Vue.js開發(fā)跨平臺應(yīng)用的前端框架,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-08-08

最新評論