怎么在ajax中实现一个select三级联动效果

这期内容当中小编将会给大家带来有关怎么在ajax中实现一个select三级联动效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

前端js代码如下：

<script type="text/javascript" class="lazy" data-src="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()" > <option value="0">请选择事件大类</option> </select>      </td> </tr> <tr> <td height="40"> <select id="secondlevel" onchange="secondlevel_Click()" > <option value="0">请选择事件小类</option> </select> </td> </tr> <tr> <td height="40"> <select id="thirdlevel" > <option value="0">请选择事件类别</option> </select> </td> </tr> </table>

上述就是小编为大家分享的怎么在ajax中实现一个select三级联动效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网行业资讯频道。