![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
数据库+javascript+html如何实现多级select下拉菜单
请问数据库表需要用到哪些字段,js又要怎么实现 展开
这个,其实比较简单
数据上来说,相当于是一个多维数组
比如,系 :
计算机,中文,英语
然后是专业:
计算机 -> 软件工程,xxx专业 ...
中文 -> 汉语言文学,xxx专业 ...
数据库在设计上,你可以将他们都放在一个表里面,可以有这些列
id 唯一id
name 名称,可以是专业名称,也可以是系名称
parent 指定如果是专业,是数据那个系,这里可以存成系的id,
如果是系,那么这里直接填0,表示就可以
这样的话,一个demo数据
id name parent
1 计算机系 0
2 软件工程 1
这样,上边,后台的数据就这个节奏就可以满足,如果专业还有细分,那这个结构也可以满足
前台显示的时候,这里分成俩个select来显示就可以
第一个select用来显示系,查询parent为0的数据,显示到select里面就可以
第二个select用来显示系的专业,查询的时候,将第一个select的系id拿到,直接数据库里面查询parent为第一个select选择系的id的数据
demo
选择系:
<select id="department" onchange="change(this)"></select>
选择专业:
<select id="professional"></select>
//用js读取数据,然后生成代码
//根据parentid,读取数据,然后返回
function getData(parentId , callback){
$.ajax({
url : 'test.do',//后台数据地址
data : {parentId : parentId},//请求parentid的数据
success : function(result){
alert(result);
callback(result);
}
})
}
function renderOptions(arr , el){//生成select 的 option
el.empty();
$.each(data , function(index , item){
$('<option/>').attr({
value : item.id
}).html(item.name).appendTo(el);
})
}
var department = $('#department');//系的select
getData(0 , function(data){//请求系的数据
department.empty();
renderOptions(data , department);//这里生成系的select
});
var professional = $('#professional');//专业的select
function change(el){//当系变化的时候
var parentId = $(el).val();//这里得到选择的系的id
getData(parentId , function(data){
professional.empty();
renderOptions(data , professional );//这里生成专业的select
});
}
就是这样的原理
后台还需要一个查询,就是根据parentid查询数据,就可以了
先说数据库的设计,系的表就不说了,比如有主键depart_id和depart_name;
然后就是专业的表,major,有个major_id,major_name,最重要的就是还有个depart_id,这是这张表的外键映射系表的主键。
到时候查询就是比如说计算机系的id为1,你就查major表里的depart_id为1的专业就可以了。
至于脚本,这个要用到ajax来进行即时更新的,这个就有很多方法了,用原来的ajax,或者你用封装好的jquery也可以,这个就是网上搜个小例子就OK了。
希望对你有帮助。
可以只弄一张表吗
可以啊,比如说你多一个type字段来判断这个到底是系还是专业,不过这样一点也不符合设计规范啊,既然不是一个东西,就应该分开放
广告 您可能关注的内容 |