layui的select联动

素颜马尾好姑娘i 2022-06-03 04:27 392阅读 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>  
  
<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">所在区域 ：</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监听事件使用**

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

**2.数据异步加载到select的option中之后，点击该select会发现layui的选中效果不起作用，需要使用form.render('select');重新渲染一次，就可以正常使用。**