js/jsp实现两级级联下拉

页面代码

						<div class="form-group row">
							<label class="col-sm-2 control-label text-right">一层次原因：</label>
							<div class="col-sm-8">
								<select id="yccyy" name="yccyy" class="form-control select2">
									<option value="---请选择---">----请选择---</option>
								</select>
								
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-2 control-label text-right">二层次原因：</label>
							<div class="col-sm-8">
								<select id="eccyy" name="eccyy" class="form-control select2">
									<option value="---请选择---">----请选择---</option>
								</select>
								
							</div>
						</div>

js代码

<script type="text/javascript">
		var arr = [
		           {name:'设计',arrList:['设计输入问题','设计差错','试验验证不充分','设计可靠性欠缺','设计接口不协调','技术未吃透','测试覆盖性不全']},
		           {name:'工艺',arrList:['工艺差错','工艺方案考虑不周','工艺技术未吃透']},
		           {name:'操作',arrList:['误操作','违章操作']},
		           {name:'管理',arrList:['无章可循','办法不完善','培训不到位','执行不到位','有章不循']},
		           {name:'器材',arrList:['固有质量问题','使用质量问题']},
		           {name:'软件',arrList:['需求缺陷','设计缺陷','接口缺陷','健壮性设计不足','测试缺陷','配置管理差错']},
		           {name:'设备',arrList:['设备能力不足','设备老化','校验不到位']},
		           {name:'环境',arrList:['环境问题']},
		           {name:'其他',arrList:['其他问题']}
		           ]
		
		//获取操作对象
        var yccyy=document.querySelector('[name="yccyy"]')
        var eccyy=document.querySelector('[name="eccyy"]')
        
        for(var i in arr){
           //创建选项
           var opt=document.createElement('option')
           //给当前对象设置value属性值
           opt.value=arr[i].name
           //给当前对象添加文本内容
           opt.innerHTML=arr[i].name
           //把新元素追加到指定父级中
           yccyy.appendChild(opt)
        }
		
		yccyy.onchange=function(){
	            //保留当前第一个选项
	            eccyy.options.length=1
	            //获取当前被选中的一级原因对象
	            var p1=this.value
	            //遍历所有数据
	            for(var i in arr){
	                //判断当前一级原因是否等于被选中的一级原因
	                if(p1==arr[i].name){
	                    //满足条件以后再获取该一级原因对应的二级原因,并遍历
	                    for(var j in arr[i].arrList){
	                        //创建选项
	                        var opt=document.createElement('option')
	                        //给当前对象设置value属性值
	                        opt.value=arr[i].arrList[j]
	                        //给当前对象添加文本内容
	                        opt.innerHTML=arr[i].arrList[j]
	                        //把新元素追加到指定父级中
	                        eccyy.appendChild(opt)
	                    }
	                }
	            }
	        }
        
	</script>

效果

1.一级下拉。

2.如果不选择一级下拉数据，那么二级下拉就无法显示数据。

3.选择了一级下拉，二级下拉才会对应一级下拉所选的数据进行展示。