//下拉框必须在 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 == 0){ 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 == 0){ //清空赋值 $("#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 下拉框 级联 动态赋值 与获取选中值