本文利用ajax技术从数据库中获取数据，动态实现select三级联动，效果图如下：
前端js代码如下：
<script type="text/javascript" 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()" 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- PHP+Mysql+Ajax+JS实现省市区三级联动
- asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
- AJAX省市区三级联动下拉菜单(java版)
- ajax实现无刷新省市县三级联动
- ajax三级联动下拉菜单效果
- jquery+ajax实现省市区三级联动效果简单示例
- jQuery ajax实现省市县三级联动
- ajax三级联动的实现方法
- AJAX和WebService实现省市县三级联动具体代码
- ajax.net +jquery 无刷新三级联动的实例代码
