2020-09-18

下拉框的数据绑定
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术： MVC
作者：罗培发
撰写时间：2020.9.16
学院的下拉框 (根据学院查询属下的年级班级)
第一种方法
下拉框元素的Id(多个)、下拉框数据的Url、参数、下拉框默认值
createSelect(selectIds, url, params, defaultValue) – 为空的数据可以不填createSelect([‘searchAcademeID’, ‘academeID’], “@Url.Content(”~/BaseInfoManage/Class/SelectAcademeForSelect")");

第二种方法
不需要参数
$.post("@Url.Content("~/BaseInfoManage/Class/SelectAcademeForSelect")",
回调
function (jsonObj) {
for (var i = 0; i < jsonObj.length; i++) {
JQuery写法 可以直接支持HTML代码注入 下拉框数据
搜索栏
不能直接使用 academeID 执行了数据，发送了请求 但是没有出现下拉框(报错)
$("#searchAcademeID").append(’’ + jsonObj[i].academeName + ‘’);
新增模态框
$("#academeID").append(’’ + jsonObj[i].academeName + ‘’);
}
});
});

搜索栏 使用异步请求绑定下拉框
当学院下拉框发生改变的时候 年级、班级下拉框的变化
function bindSearchSpecialtyAndClass() {
var academeID = $("#searchAcademeID").val();
根据学院查询专业
createSelect(“searchSpecialtyID”, “@Url.Content(”~/BaseInfoManage/Class/SelectSpecialtyForSelect")", { academeID: academeID });

在查询之前清空数据（点击学院信息后，更改学院信息时，清空数据）
JQuery的empty() 清除数据
清空数据影响太大了，导致"----请选择----“页面选择开头模板消失
$(”#searchSpecialtyID").empty();
添加页面选择开头模板"----请选择----"
$("#searchSpecialtyID").append(’----请选择----’);
出现500错误 ，常见的500错误，一般是因为没有传参数
academeID ：是Json格式，直接传变量，后面无法处理 无法处理的数据会被扔掉，所以出现没有传参的数据错误
$.post("@Url.Content("~/BaseInfoManage/Class/SelectSpecialtyForSelect")", { academeID: academeID }, function (jsonObj) {
for (var i = 0; i < jsonObj.length; i++) {
$("#searchSpecialtyID").append(’’ + jsonObj[i].specialtyName + ‘’);
}
});

根据参数将共通的代码/数据 提取成方法 后面共通调用 （封装方法）
//抽取方法
//创建下拉框
//下拉框元素的Id(多个)、下拉框数据的Url、参数、下拉框默认值
//需要的参数 selectIds–多个下拉框ID url–请求的链接 params–传参的参数 defaultValue–回填数据时的下拉框指定默认值
function createSelect(selectIds, url, params, defaultValue) {
console.log(params);
//1、清空以前的
//判断是否是数组
if ($.type(selectIds) == ‘array’) {
for (var i = 0; i < selectIds.length; i++) {
//清空
$("#" + selectIds[i]).empty();
$("#" + selectIds[i]).append(’----请选择----’);
}
} else {
$("#" + selectIds).empty();
$("#" + selectIds).append(’----请选择----’);
}
//请求 生成option
$.post(url, params, function (jsonObj) {
for (var i = 0; i < jsonObj.length; i++) {
var strOption = ‘’ + jsonObj[i].text + ‘’;

                //判断是否是数组
                //注意循环的变量，循环变量一致会导致死循环
                if ($.type(selectIds) == 'array') {
                    for (var j = 0; j < selectIds.length; j++) {
                        $("#" + selectIds[j]).append(strOption);
                    }
                } else {
                    $("#" + selectIds).append(strOption);
                }
            }

            //判断是否要设置初始值
            if (defaultValue != undefined && defaultValue != null && defaultValue != "") {
                //判断是否是数组
                if ($.type(selectIds) == 'array') {
                    for (var j = 0; j < selectIds.length; j++) {
                        $("#" + selectIds[j]).val(defaultValue);
                    }
                } else {
                    $("#" + selectIds).val(defaultValue);
                }
            }
        });
    }