jQuery ajax实现三级联动

使用表格布局方式

<table >
	<tr>
		<td style="width:80px;">运营商名称：</td>
		<td>
                    <select id="select_yys" "></select>
                </td>
		<td style="width:80px;">充电站名称：</td>
		<td>
                    <select id="select_cdz" ></select >
		</td>
		<td style="width:80px;">充电桩名称：</td>
		<td>
                    <select id="select_cdss" ></select>
		</td>
		<td>
		    <button class="btn btn-primary btn-small" id="searchBottomChart">查询</button>
		</td>
	</tr>
</table>

 

//首次加载页面执行函数
$(function(){
			 $("#select_yys").on("change", search_cdz);//二级下框拉改变时间
			 $("#select_cdz").on("change", search_cdss);//三级下框拉改变时间

                          search_yys();//一级下拉框函数
			
			});
			
		});	

// 运营商名称 查询
		function search_yys(){
			//ajax获取后台json数据
			$.getJSON("useratio/selectOper?orgNo=${ORG_NO }" , function(data){
				$("#select_yys").empty();//清楚被选元素的所有内容
				var arr = [];//定义数组
				$(data).each(function(){//遍历返回值，并装进数组里，生成<option>下拉标签
					arr.push("<option value='"+$(this)["0"]["OPER_ID"]+"'>"+$(this)["0"]["OPER_NAME"]+"</option>")
				});
				$("#select_yys").html(arr.join(""));//遍历数组到<select>标签
				if(data.length>0){//判断返回值是否为空
					$("#select_yys").first().attr("selected","true");//设置selected属性为可选
				}
				search_cdz();//调用二级联动函数
			});
		}

              // 充电站名称  查询
		function search_cdz(){
			$("#select_cdz").empty();
			if($("#select_yys").children().length < 0){//判断一级联动是否有值
				return;
			}
			var yys = $("#select_yys").children("option:selected").val();//获取一级下拉框的值
			$.getJSON("useratio/selectStation?operId=" + yys, function(data){//ajax访问后台方法传递二级下拉框参数，并获取返回值				
				var arr = [];
				$(data).each(function(){
					arr.push("<option value='"+$(this)["0"]["ST_ID"]+"'>"+$(this)["0"]["ST_NAME"]+"</option>")
				});
				$("#select_cdz").html(arr.join(""));
				if(data.length>0){//判断返回值是否为空
					$("#select_cdz").first().attr("selected","true");
				}
				search_cdss();//调用三级联动函数
			});
		}

// 充电桩名称[充电设施]  查询
		function search_cdss(){
			$("#select_cdss").empty();
			if($("#select_yys").children().length < 0){
				return;//判断一级下拉框是否为空
			}
			if($("#select_cdz").children().length < 0){
				return;//判断二级下拉框是否为空
			}
			var yys = $("#select_yys").children("option:selected").val();//获取一级下拉框的值
			var cdz = $("#select_cdz").children("option:selected").val();//获取二级下拉框的值
			$.getJSON("useratio/selectCharger?operId=" + yys +"&stId=" + cdz, function(data){//ajax向后台传递参数，并返回值
				var arr = [];
				$(data).each(function(){
					arr.push("<option value='"+$(this)["0"]["CHG_ID"]+"'>"+$(this)["0"]["CHG_NAME"]+"</option>")
				});
				$("#select_cdss").html(arr.join(""));
				if(data.length>0){
					$("#select_cdss").first().attr("selected","true");
				}
			});
		}