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

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

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

image.png

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.5.2 Zero

Wx:CYLrich8 QQ: 1396524517 Tel:021-80158007
陈云龙 © 2019 Some Rights Reserved 皖ICP备14008698号-6