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");
}
});
}