select2 动态更改下拉选项

场景  

首先初期时构筑一个下拉列表   之后根据页面条件，需要改变下拉列表选项的内容。不同条件选项内容不同

 

初期构筑下拉列表就不详细说了，按正常方式构筑即可。

详细步骤：

当选择页面控件时，触发事件，ajax后台取数据列表，前台页面就收到数据后，清空原列表选项，根据最新数据构筑下拉列表。

前端js，此处我是根据日期不同   显示当时有效的员工，因为员工入职时间不同，有的员工在之前的某天并没有入职到公司

 

$("#workDate").datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                startView: "month",
                autoclose: true
            }).on('changeDate', function(e){
                var workDate = e.date.toLocaleDateString();
                $.post("/system/user/selectStaffList", {createTime: workDate}, function(result) {
                    if (result.code == web_status.SUCCESS) {
                        $("#userId").empty();    //此处清空原来的列表
                        for (var d = 0; d < result.data.length; d++) {
                            var item = result.data[d];
                            var option = new Option(item.userName, item.userId);//此处构筑选项 分别是 text value 后面可以加参数   自己找api吧  我没找到。。。懒
                            $("#userId").append(option); // 加入选项
                        }

                        $("#userId").trigger('change'); // 刷新控件，使新选项生效
                    } else {
//                        $.modal.msgError(result.msg);
                    }
                });