求助，js三级联动下拉框回显

[是林啊]

框架是layui。

现在能从后端接受到值，能实现一级下拉框的回显，但是不能取实现二三级下拉框。

大概的效果就是如下，图中的二级下拉框是我加的一个测试的选项，用来看值是否传过来的。


问题就是现在我该怎么办才能实现二三级下拉框的联动，因为一级下拉框就是正常的下拉框，所以每个option 直接判断就好了，但是二三级是联动的，这里萌新就不懂了，要如何根据我的值来判断选中？


下拉框的代码如下：

<tr>
	<td>战略性新兴产业：</td>
		<td colspan="3">
				<div class="width180 float-l">
					<select name="newIndustry" id="newIndustry" lay-filter="newIndustry">
			          	<option value="">--请选择--</option>
						<option value="newIndustry1" ${project.newIndustry=="newIndustry1" ? "selected" : ""}>新一代信息技术产业</option>
						<option value="newIndustry2" ${project.newIndustry=="newIndustry2" ? "selected" : ""}>高端装备制造产业</option>
						<option value="newIndustry3" ${project.newIndustry=="newIndustry3" ? "selected" : ""}>新材料产业</option>
			        </select>
		         </div>
		       <div class="width180 float-l"> 
			        <select name="newIndustry1" id="newIndustry1" lay-filter="newIndustry1">
			          	<option value="">--请选择--</option>
			          	<option value="">${project.newIndustry1 }</option>  //这个是我的测试值，是有结果的
			        </select>
		         </div>
		        <div class="width180 float-l">
			        <select name="newIndustry2" id="newIndustry2" >
			          	<option value="">--请选择--</option>
			        </select>
		        </div>
		</td>
	</tr>

下拉框联动的代码：

var table = null;
	var form = null;
	var countyData = null;
	var fn = {};
	var newIndustryObj={
			"newIndustry1":[
				{"id":"newIndustry11","text":"下一代信息网络产业"},{"id":"newIndustry12","text":"信息技术服务"},{"id":"newIndustry13","text":"电子核心产业"},{"id":"newIndustry14","text":"网络信息安全产品和服务"},{"id":"newIndustry15","text":"人工智能"}
			],
			"newIndustry11":[
				{"id":"newIndustry111","text":"网络设备"},{"id":"newIndustry112","text":"信息终端设备"},{"id":"newIndustry113","text":"网络运营服务"}
			],
			"newIndustry12":[
				{"id":"newIndustry121","text":"新兴软件及服务"},{"id":"newIndustry122","text":"“互联网+”应用服务 "},{"id":"newIndustry123","text":"大数据服务 "}
			],
			"newIndustry13":[
				{"id":"newIndustry131","text":"集成电路 "},{"id":"newIndustry132","text":"新型显示器件"},
				{"id":"newIndustry133","text":"新型元器件"},{"id":"newIndustry134","text":"高端储能"},
				{"id":"newIndustry135","text":"关键电子材料"},{"id":"newIndustry136","text":"电子专用设备仪器"},
				{"id":"newIndustry137","text":"其他高端整机产品"}
			]
};

[是林啊]

已自己解决，大致办法如下： 在页面加了两个隐藏的input标签用来存值二级菜单和三级菜单的值，因为我的值是存在后台的

//二级下拉框对应的input
<input type="hidden" id="newInd1" value="${project.newIndustry1 }"/>
<select name="newIndustry1" id="newIndustry1" lay-filter="newIndustry1">
                          <option value="">--请选择--</option>
                          <option value="">${project.newIndustry1 }</option>  //这个是我的测试值，是有结果的
                    </select>
//三级下拉框对应的input框
<input type="hidden" id="newInd2" value="${project.newIndustry2 }"/>
			        <select name="newIndustry2" id="newIndustry2" style="width:217px; ">
			          	<option value="">--请选择--</option>
			        </select>

然后在js里面 代码如下：

/**
	 * 定义初始化组件方法
	 */
	fn.init = function(){
		//初始化数据表格
		layui.use(['table', 'form'], function(){
			table = layui.table;
			form = layui.form;
			fn.initComponent();  //初始化方法
		});
	};


/**
	 * 回显下拉框 Start  回显下拉框方法定义在fn.initComponent()中
	 */
	fn.initShowSelect = function(){
		var newIndustry = $("select[name='newIndustry']").val();  //一级下拉框
		var newInd1 = $("#newInd1").val();  //二级下拉框对应值存input框中
		var newInd2 = $("#newInd2").val();  //三级下拉框对应值存在input中
		//判断以一级下拉框是否存在值
		if(newIndustry!=null&&newIndustry!=""){
			var xx=newIndustryObj[newIndustry];
			for(var j in xx){
				//添加下拉框元素
				$('#newIndustry1').append(new Option(xx[j].text, xx[j].id));
				//如果下拉框中的元素有和对应值一样的的数据，则将对应值回显到下拉框
				if(xx[j].id==newInd1){
					$("select[name='newIndustry1']").val(xx[j].id);
				}
			}
			form.render('select');
		}
		
		var newIndustry1 = $("select[name='newIndustry1']").val();  //二级级下拉框
		//判断以二级下拉框是否存在值
		if(newIndustry1!=null&&newIndustry1!=""){
			var xx=newIndustryObj[newIndustry1];
			for(var j in xx){
				//添加下拉框元素
				$('#newIndustry2').append(new Option(xx[j].text, xx[j].id));
				//如果下拉框中的元素有和对应值一样的的数据，则将对应值回显到下拉框
				if(xx[j].id==newInd2){
					$("select[name='newIndustry2']").val(xx[j].id);
				}
			}
			form.render('select');
		}
		
	}
	/**
	 * 回显下拉框 end
	 */

当然这种回显方法会有一个问题，就是会造成下拉框的option重叠，因为我这边是append的option，所以要用下面这个方法清空一下 当然代码的位置是放在下拉框联动的位置。我是通过form.on("select(newIndustry)"这个来控制代码联动，所以具体还是看自己的代码的写法。 代码示例

$("#newIndustry1").empty();  //清空一次下拉框

form.on("select(newIndustry)", function(selData){
			var newIndustryVal = selData.value;
			var xx=newIndustryObj[newIndustryVal];
			$("#newIndustry1").empty();  //清空一次下拉框
			for(var j in xx){
				$('#newIndustry1').append(new Option(xx[j].text, xx[j].id));
			}
			form.render('select');
		});

[是林啊]

最后来个人结贴吧

[一支糖包仔]

没用过layui框架，但是下拉框的onchange事件应该可以做到你说的效果。 例如A下拉框改变的时候，把数据用ajax传到后台，查询出B下拉框所需要的数据，绑定进去。 下拉框有value和text两个属性，一般是value属性保存关联数据，text显示。 例如A下拉value等于1， 把A的value拿去查询，把数据库中所有父级是1的查出来，绑定到B里面。

[是林啊]

引用 3 楼 一支糖包仔 的回复:

没用过layui框架，但是下拉框的onchange事件应该可以做到你说的效果。 例如A下拉框改变的时候，把数据用ajax传到后台，查询出B下拉框所需要的数据，绑定进去。 下拉框有value和text两个属性，一般是value属性保存关联数据，text显示。 例如A下拉value等于1， 把A的value拿去查询，把数据库中所有父级是1的查出来，绑定到B里面。

onchange事件我试了是不行的，所以才尝试了这种写法，不过也谢谢大佬了