jquery怎么实现不刷新页面就更新下拉列表？

Question

每次添加教学区后，教室管理教学区下拉列表并未更新最新添加的教学区，需要重新刷新整个页面方能出现。

现在想添加后不刷新直接实时在下拉列表中更新

    //添加一个教学区
    function addArea() {
        var areaName = $("#operator_areaName").val();
        if (areaName == '') {
            layer.msg("教学区名称不能为空", {
                time : 1500,
                icon : 2
            });
            return;
        } else {
            // 发送请求
            var url = "/school/schoolArea/add";
            var data = {
                "areaName" : areaName
            };
            $.post(url, data, function(result) {
                if (result.resCode == "0") {
                    layer.alert('添加教学区成功', {
                        icon : 1
                    });
                    $('#area-table').bootstrapTable('refreshOptions',{pageNumber:1});
                    $("#areaModal").modal('hide');
                    //清除相应缓存,保证操作后数据是最新的
                    operatorAreaDealCache();

                } else {
                    layer.alert('操作失败,原因：' + result.resMsg, {
                        icon : 2
                    });
                }
            //  $("#search_classroom_areaSelector").load(url,data);
            });
            $("#search_classroom_areaSelector").attr("selected","selected");
        }

    }

//点击教室管理tab页
function loadClassrooms() {
    if(selectClassroomList.length != 0) {
        selectClassroomList = [];
        $("#classroom-table").bootstrapTable('removeAll');
        $("#classroom-table").bootstrapTable("refresh");

    } else {

        getClassroomList();
    }
}

//填充教学区下拉列表
function getAllAreaSelector() {
    if (isFristGetAllAreaSelector) {
        $("#operator_schoolAreaSelector").selectpicker({
            noneSelectedText: '请选择',//默认显示内容
            size: 5
        });
        //数据赋值
        //var select = $("#schoolAreaSelector");
        var html = "";
        var url = "/school/schoolArea/list";
        var data = {"rows": -1};
        $.post(url, data, function (result) {
            if (result.resCode == "0") {
                var areaList = result.rows;
                for (var i = 0; i < areaList.length; i++) {
                    html += "<option value='" + areaList[i].areaId + "'>" + areaList[i].areaName + "</option>";
                }
                $("#operator_schoolAreaSelector").append(html);
                $('#operator_schoolAreaSelector').selectpicker('refresh');
                //初始化刷新数据
                isFristGetAllAreaSelector = false;
            }
        });
    }
}

//添加一个教学区
    function addArea() {
        var areaName = $("#operator_areaName").val();
        if (areaName == '') {
            layer.msg("教学区名称不能为空", {
                time : 1500,
                icon : 2
            });
            return;
        } else {
            // 发送请求
            var url = "/school/schoolArea/add";
            var data = {
                "areaName" : areaName
            };
            $.post(url, data, function(result) {
                if (result.resCode == "0") {
                    layer.alert('添加教学区成功', {
                        icon : 1
                    });
                    $('#area-table').bootstrapTable('refreshOptions',{pageNumber:1});
                    $("#areaModal").modal('hide');
                    //清除相应缓存,保证操作后数据是最新的
                    operatorAreaDealCache();

                } else {
                    layer.alert('操作失败,原因：' + result.resMsg, {
                        icon : 2
                    });
                }
            //  $("#search_classroom_areaSelector").load(url,data);
            });
            $("#search_classroom_areaSelector").attr("selected","selected");
        }

    }

Answer 1

原本教学区的值肯定是通过接口获取到，所以想不刷新页面就能获取到新的值，那就在点击下拉框的时候添加个点击事件，重新通过接口到后台在获取到最新的数据