数据库+javascript+html如何实现多级select下拉菜单

比如我有两个下拉菜单,一个是系,一个是专业,第一个选择计算机系,第二个会显示软件工程,信息管理等,第一个点中文系,第二个跟着变成汉语言文学等请问数据库表需要用到哪些字段,... 比如我有两个下拉菜单,一个是系,一个是专业,第一个选择计算机系,第二个会显示软件工程,信息管理等,第一个点中文系,第二个跟着变成汉语言文学等
请问数据库表需要用到哪些字段,js又要怎么实现
展开
 我来答
huibo865686
推荐于2017-11-26 · TA获得超过916个赞
知道小有建树答主
回答量:325
采纳率:80%
帮助的人:262万
展开全部

这个,其实比较简单

数据上来说,相当于是一个多维数组

比如,系 :

    计算机,中文,英语

然后是专业:

    计算机 -> 软件工程,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查询数据,就可以了

fafakkandyaer
2013-12-02 · TA获得超过298个赞
知道小有建树答主
回答量:266
采纳率:100%
帮助的人:174万
展开全部
这个我给你提供一个思路
先说数据库的设计,系的表就不说了,比如有主键depart_id和depart_name;
然后就是专业的表,major,有个major_id,major_name,最重要的就是还有个depart_id,这是这张表的外键映射系表的主键。
到时候查询就是比如说计算机系的id为1,你就查major表里的depart_id为1的专业就可以了。
至于脚本,这个要用到ajax来进行即时更新的,这个就有很多方法了,用原来的ajax,或者你用封装好的jquery也可以,这个就是网上搜个小例子就OK了。
希望对你有帮助。
追问
可以只弄一张表吗
追答
可以啊,比如说你多一个type字段来判断这个到底是系还是专业,不过这样一点也不符合设计规范啊,既然不是一个东西,就应该分开放
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式