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&#
Ajax动态访问数据库设计html多级select下拉菜单的方法
最新推荐文章于 2021-06-21 22:08:48 发布
本文介绍了一种使用Ajax、JavaScript和HTML实现动态访问数据库,创建多级下拉菜单的方法。通过调用getArea方法,传递区域ID和SELECT对象,删除后续所有<select>元素,并获取新的下拉菜单内容。利用JSON解析返回的数据,生成并添加新的<select>到页面。同时,设置change事件监听,当选择项改变时,递归调用setSelect函数,更新下拉菜单,直至达到最底层。
摘要由CSDN通过智能技术生成