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

这个，其实比较简单

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

比如，系 ：

计算机，中文，英语

然后是专业：

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

1、打开管家婆物联通，进入【开单】-【仓库调拨】功能。

2、点击【+】新增单据，选择经手人、调入调出仓库等信息后，可以点击条码扫描下方的向上按钮隐藏单据表头信息，提高屏幕利用率。Tips：若需要隐藏/显示单据表头部分字段，可点击开单界面右上角【?】，在参数-【单据配置】中设置。

3、点击开单界面右上角【+】录入产品信息，选择需要调拨的产品信息，输入调拨数量后保存即可。

4、产品信息录入完毕后，点击保存即可将单据临时存储在手机端；点击提交即可将单据即时上传管家婆系统。

5、如需打印出蓝牙小票，则点击【打印】进入打印预览界面，再次点击打印即可打印出小票。Tips：如果客户使用自己采购的打印机，物联通程序不确认可以支持。建议直接从物联通经销商处采购打印机。

---