Ajax动态访问数据库设计html多级select下拉菜单的方法

最新推荐文章于 2022-08-23 23:49:36 发布

原创最新推荐文章于 2022-08-23 23:49:36 发布 · 3.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #html #javascript #数据库 #下拉菜单

本文介绍了一种使用Ajax、JavaScript和HTML实现动态访问数据库，创建多级下拉菜单的方法。通过调用getArea方法，传递区域ID和SELECT对象，删除后续所有<select>元素，并获取新的下拉菜单内容。利用JSON解析返回的数据，生成并添加新的<select>到页面。同时，设置change事件监听，当选择项改变时，递归调用setSelect函数，更新下拉菜单，直至达到最底层。

getArea(0,$('<select>'));//调用方法，第一个参数是要查询项目的id，根据数据库来就好，第二个参数是一个select对象，可以是现有的，也可以生成一个新的在页面刷新的时候自动append到body上

function getArea(aid,iselect){
	var ajaxReq;
	iselect.nextAll('select').remove();//将被点击的select后面所有的select菜单移出，准备换新的
	$.get("/ajax/ajaxservlet","area_id="+aid,function(a,b,c){//这里的地址是servlet地址，可以自己改动

			var text = a.toString();
			if(text.length<3){
				return;
			}
			var select = $('<select>');
			//解析字符串成为josn对象
			var objs = eval("("+text+")");
			//json字符串格式应为[{area_id:'2';area_name:'山东'}{area_id:'3';area_name:'河北'}{}{}]
			for(var i=0;i<objs.length;i++){
				 var option = $('<option>',{'value':objs[i].area_id});
				 option.html(objs[i].area_name);
				 option.appendTo(select);
			}
		
			select.bind('change', function(){setSelect(this)});
			select.appendTo($('body'));//添加到body上
			
			setSelect(select);//把此select传入，根据此select的第一个option的id递归，生成下一个select，直到查到最底层为止
			});
	
}

function setSelect(obj){
    getArea($(obj).children("option:selected").attr('value'),$(obj));
}
//在递归时，选择传入select标签底下被选中的option标签，将这个option标签的value属性（存放有本选项的id值）发到服务器，然后服务器根据此id查询此id的子元素