layui的select联动

川长思鸟来 2022-01-28 05:17 214阅读 0赞

要实现联动效果注意两点：

第一要可以监听到select的change事件；

第二异步加载的内容，需要重新渲染后才可以 正常使用。

html结构：

<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>

</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监听事件使用

form.on('select(myselect)', function(data)\{\}）  其中myselect是select的 lay-filter属性值

2.数据异步加载到select的option中之后，点击该select会发现layui的选中效果不起作用，需要使用form.render('select');重新渲染一次，就可以正常使用。  
  
转载自：https://blog.csdn.net/u012011360/article/details/78834852