您好,登录后才能下订单哦!
layui中怎么实现select区域联动,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
第一要可以监听到select的change事件;
第二异步加载的内容,需要重新渲染后才可以 正常使用。
Html结构:
```
<div class="x-body">
<form class="layui-form" action="" method="post">
<div class="layui-form-item">
<label class="layui-form-label">选择地区</label>
<div class="layui-input-inline">
<select name="province" lay-filter="province" id="s_p">
<option value="1">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="city" lay-filter="city" id="s_c">
<option value="1">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="area" lay-filter="area" id="s_x">
<option value="1">请选择区/县</option>
</select>
</div>
</div>
<div>
<label class="layui-form-label">选择地区</label>
<div class="layui-input-inline">
<select name="towns" lay-filter="towns" id="s_t">
<option value="1">请选择乡镇/街道</option>
</select>
</div>
<!--<div class="layui-input-inline">-->
<!--<select name="burg" lay-filter="burg" id="s_b">-->
<!--<option value="1">庄/村</option>-->
<!--</select>-->
<!--</div>-->
</div>
</form>
</div>
```
Js:
```
<script type="text/javascript">
layui.use(['form', 'layer', 'laytpl', 'jquery'], function () {
var form = layui.form
, $ = layui.jquery;
var parentId = '0';
$(function () {
$.post(serverPath + "sys/area/backProvince/" + parentId, function (result) {
var p = result;
for (v in p) {
var pp = p[v].id;
$("#s_p").append("<option value=" + pp + ">" + p[v].fullname + "</option>")
}
form.render();
})
form.on('select(province)', function (data) {
var p = $("#s_p").val();
if (p != "1") {
$.post(serverPath + "sys/area/backProvince/" + p, function (result) {
var c = result;
$("#s_c").html("");
$("#s_c").append("<option value='1'>请选择市</option>");
$("#s_x").html("");
$("#s_x").append("<option value='1'>请选择县/区</option>");
$("#s_t").html("");
$("#s_t").append("<option value='1'>请选择乡镇/街道</option>");
$("#s_b").html("");
$("#s_b").append("<option value='1'>请选择村/街道号</option>");
for (v in c) {
var cc = c[v].id;
$("#s_c").append("<option value=" + cc + ">" + c[v].fullname + "</option>")
}
form.render();
})
}
});
form.on('select(city)', function (data) {
var c = $("#s_c").val();
if (c != "1") {
$.post(serverPath + "sys/area/backProvince/" + c, function (result) {
var x = result;
$("#s_x").html("");
$("#s_x").append("<option value='1'>请选择县/区</option>");
$("#s_t").html("");
$("#s_t").append("<option value='1'>请选择乡镇/街道</option>");
$("#s_b").html("");
$("#s_b").append("<option value='1'>请选择村/街道号</option>");
for (v in x) {
var xx = x[v].id;
$("#s_x").append("<option value=" + xx + ">" + x[v].fullname + "</option>")
}
form.render();
});
}
});
form.on('select(area)', function (data) {
var x = $("#s_x").val();
if (x != "1") {
$.post(serverPath + 'sys/area/backProvince/'+ x, function (result) {
var t = result;
$("#s_t").html("");
$("#s_t").append("<option value='1'>请选择乡镇/街道</option>");
$("#s_b").html("");
$("#s_b").append("<option value='1'>请选择村/街道号</option>");
for (v in t) {
var xx = t[v].id;
$("#s_t").append("<option value=" + xx + ">" + t[v].fullname + "</option>")
}
form.render();
});
}
});
});
});
</script>
```
总结:
1.select的chage监听事件使用
form.on('select(myselect)', function(data){}) 其中myselect是select的 lay-filter属性值
2.数据异步加载到select的option中之后,点击该select会发现layui的选中效果不起作用,需要使用form.render('select');重新渲染一次,就可以正常使用。
关于layui中怎么实现select区域联动问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。