联动下拉框的写法

    这个是我自己写的一个功能。效果图如下：

这个是先让你选择学院，然后它会把学院里面开设的专业给你查询出来，然后选择了学院和专业，就通过学院和专业查询出该学院的某个专业有多少个班。

还要把数据回填到input里。

Css代码：

这里放了一个input，还放了一个’bigbox’的div,这个div是一个空，我是用来制作下拉框的选项的。然后把它定位到input的下面，如上图所示。

Js代码：

先设置input的点击事件。

先判断’bigbox’的div里面是否已经有生成的下来了框选项，如果有就直接打开，否则查询学院的信息进行回填。

<ul class="Academe">

<li οnclick="huankuang(1,1,this)" class="on">通信与信息工程

</ul>

hankuang(1,1,this)里面的第一个参数代表的是当是哪一种选项，比喻说是学院还是专业，

第二个是id，第三代表的是但前点击的li。

function huankuang(index, id, DJdli) {

            //设置高亮

            $(DJdli).addClass("on").siblings().removeClass("on");

 

            if (index == 1) {//点击的是学院

                AcademeID = id;

                var ul = $("#bigbox ul");

 

                if (ul.length > 1) {

                    for (var i = index; i < ul.length; i++) {

                        $(ul[i]).remove();

                    }

                }

                //根据id查询专业信息

                $.post("SelectSpecialtyByID", { AcademeID: id }, function (data) {

                    if (data.length == 0) {

                        $("#bigbox").hide();

                        $("#xuanzhe").prop("disabled", false);

                        alert("该学院不存在任何专业");

                        return;

                    }

                    else {

                        var text = "";

                        for (var i = 0; i < data.length; i++) {

                            text += "<li οnclick=huankuang(" + 2 + "," + data[i].id + ",this)>" + data[i].text + "<i class='ibox'></i></li>";

                        }

                        $("#bigbox").append('<ul class:"Specialty">' + text + '</ul>');

                    }

                });

            } else if (index == 2) {//点的是专业

                var ul = $("#bigbox ul");

                if (ul.length > 1) {

                    for (var i = index; i < ul.length; i++) {

                        $(ul[i]).remove();

                    }

                }

                //根据id查询班级信息

                $.post("SelectClassByID", { AcademeID: AcademeID, SpecialtyID: id }, function (data) {

                    if (data.length == 0) {

                        $("#bigbox").hide();

                        $("#xuanzhe").prop("disabled", false);

                        alert("该学院,的这个专业不存在班级");

                        return;

                    }

                    else {

                        var text = "";

                        for (var i = 0; i < data.length; i++) {

                            text += "<li οnclick=huankuang(" + 3 + "," + data[i].id + ",this)>" + data[i].text + "<i class='ibox'></i></li>";

                        }

                        $("#bigbox").append('<ul class:"Class">' + text + '</ul>');

                    }

                });

            } else if (index == 3) {

                $("#bigbox").hide();

                $("#xuanzhe").prop("disabled", false);

            }

代码的思路是：判断点击的是那是个

点击的是学院，就清除之前生成的专业和班级生成的选项，然后根据点击的学院ID查询出对应的专业信息。

点击的是专业那就清除生成的班级信息。

但点击的是班级就有点不一样了，因为班级下面没有要查询的数据了，所以执行的是return。

我解析可能有点不详细，请见谅。