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

Myth丶恋晨 2022-04-15 04:41 1052阅读 0赞

//下拉框必须在  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);   //选中不可点击

选中默认值和选中不可点击

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读