layui select 下拉框 级联 动态赋值 与获取选中值

时间:2022-04-24 19:27:06
//下拉框必须在  class="layui-form" 里 不然监听事件没有作用
<div class="layui-form" >
<div class="layui-inline">
<label class="layui-form-label">选择项目:</label>
<div class="layui-input-inline">
<select name="quiz" id="quiz" lay-filter="projectfilter">
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">选择子级:</label>
<div class="layui-input-inline">
<select name="project" id="project" >
</select>
</div>
</div>
<button id="shuxinBtn" class="layui-btn" lay-submit="" lay-filter="seekClassRoom">
<i class="layui-icon"></i>
</button>
</div>
$.ajax({
url : "project/findByParentId",
data : {},
dataType : "json",
success : function(resultData) {
$("#quiz").empty();
if(resultData.code == ){
console.log(resultData.data);
$("#quiz").append(new Option("请选择项目", ""));
$.each(resultData.data, function(index, item) {
$('#quiz')
.append(new Option(item.projectName, item.id));
});
}else{
$("#quiz").append(new Option("暂无数据", ""));
} layui.form.render("select");
}
}) //级联子项目
//select 监听
form.on('select(projectfilter)',function(data){
var value=data.value; //select选中的值
console.log(value);
$.ajax({
url:"project/findParentId",
data:{parentId:value},
dataType:"json",
success:function(resultData){
if(resultData.code == ){
//清空赋值
$("#project").empty();
console.log(resultData.data);
$("#project").append(new Option("请选择项目", ""));
$.each(resultData.data, function(index, item) {
//赋值
$('#project')
.append(new Option(item.projectName, item.id));
});
}else{
$("#project").append(new Option("暂无数据", ""));
}
layui.form.render("select");
}
})
})
layui.form.render("select");
}); 两种方式赋值——————————————————————
$("#getInfoName").find("option[value='"+data.PROJECT_ID+"']").prop("selected",true);
form.render(); //必须要加 $("#getInfoName").prop("disabled",true); //选中不可点击

源文:https://blog.csdn.net/qq_35226176/article/details/84325814  layui select 下拉框 级联 动态赋值 与获取选中值