ajax实现select三级联动效果

技术  /  管理员 发布于 7年前   167

本文利用ajax技术从数据库中获取数据，动态实现select三级联动，效果图如下：

前端js代码如下：

<script type="text/javascript" src="https:/article/jquery/jquery-1.9.1.min.js"></script><script type="text/javascript">$(document).ready(function(){$.ajax({type:"get",dataType:"text",url:"GetItemAction?itemlevel=1", success:function(data){ // 由JSON字符串转换为JSON对象  var objJSON=eval("("+data+")"); var len=objJSON.itemInfo.length;  var objSelect=document.getElementById("firstlevel"); for(var i=0;i<len;i++){ var op=new Option(objJSON.itemInfo[i].itemname,objJSON.itemInfo[i].itemcode); objSelect.add(op); }  },error: function (XMLHttpRequest, textStatus, errorThrown) {    alert(errorThrown);   }});});//显示二级分类function firstlevel_Click(){var objfirst=document.getElementById("firstlevel");var index=objfirst.selectedIndex; //选中索引 var itemcode=objfirst.options[index].value; //选中值if(itemcode==0){alert("请选择事件类别");return;}// 删除二级分类保留第一个var objsecond=document.getElementById("secondlevel");for(var i=objsecond.options.length-1;i>0;i--){objsecond.options.remove(i);}// 删除三级分类保留第一个var objthird=document.getElementById("thirdlevel");for(var i=objthird.options.length-1;i>0;i--){objthird.options.remove(i);}$.ajax({type:"get",dataType:"text",url:"GetItemAction?itemlevel=2&itemcode="+itemcode, success:function(data){ // 由JSON字符串转换为JSON对象  var objJSON=eval("("+data+")"); var len=objJSON.itemInfo.length; var objSelect=document.getElementById("secondlevel"); for(var i=0;i<len;i++){ var op=new Option(objJSON.itemInfo[i].itemname,objJSON.itemInfo[i].itemcode); objSelect.add(op); }  },error: function (XMLHttpRequest, textStatus, errorThrown) {    alert(errorThrown);   }});}//显示三级分类function secondlevel_Click(){var objsecond=document.getElementById("secondlevel");var index=objsecond.selectedIndex; //选中索引 var itemcode=objsecond.options[index].value; //选中值if(itemcode==0){alert("请选择事件类别");return;}// 删除三级分类保留第一个var objthird=document.getElementById("thirdlevel");for(var i=objthird.options.length-1;i>0;i--){objthird.options.remove(i);}$.ajax({type:"get",dataType:"text",url:"GetItemAction?itemlevel=3&itemcode="+itemcode, success:function(data){ // 由JSON字符串转换为JSON对象  var objJSON=eval("("+data+")"); var len=objJSON.itemInfo.length; var objSelect=document.getElementById("thirdlevel"); for(var i=0;i<len;i++){ var op=new Option(objJSON.itemInfo[i].itemname,objJSON.itemInfo[i].itemcode); objSelect.add(op); }  },error: function (XMLHttpRequest, textStatus, errorThrown) {    alert(errorThrown);   }});}

部分html代码

<table class="table-exposure"> <tr> <td height="40"> <select id="firstlevel" onchange="firstlevel_Click()" style="width:99%;font-size:1em;"> <option value="0">请选择事件大类</option> </select>      </td> </tr> <tr> <td height="40"> <select id="secondlevel" onchange="secondlevel_Click()" style="width:99%;font-size:1em;"> <option value="0">请选择事件小类</option> </select> </td> </tr> <tr> <td height="40"> <select id="thirdlevel" style="width:99%;font-size:1em;"> <option value="0">请选择事件类别</option> </select> </td> </tr> </table>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。