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"); } }); }
相关推荐
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05
坚持着执着 2020-07-05