异步绑定下拉框
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Adobe JavaScript
作者：陈钰桃
撰写时间：2020年9月17日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
成果图（只有选择了上一个模态框，下面的模态框才会显示内容）
案例：
一、页面代码
1、HTML部分代码
<div class="form-group row">
<label for="academeID" class="col-3 col-form-label">所属学院：</label>
<div class="col-9">
<select class="form-control" id="academeID" οnchange="bindFormSpecialtyAndClass()">
<option value="0">----请选择----</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="specialtyID" class="col-3 col-form-label">所属专业：</label>
<div class="col-9">
<select class="form-control" id="specialtyID">
<option value="0">----请选择----</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="gradeID" class="col-3 col-form-label">所属年级：</label>
<div class="col-9">
<select class="form-control" id="gradeID">
<option value="0">----请选择----</option>
</select>
</div>
</div>
2、script 代码
//下拉框部分
//学院的下拉框 (根据学院查询属下的年级班级)
//----------------方法二-----------------
//下拉框元素的Id(可以是多个)、下拉框数据的Url、参数、下拉框默认值
//createSelect(selectIds, url, params, defaultValue) -- 为空的数据可以不填
createSelect(['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 执行了数据，发送了请求 但是没有出现下拉框(报错)
//新增模态框
$("#academeID").append('<option value="' + jsonObj[i].academeID + '">' + jsonObj[i].academeName + '</option>');
}
});
});
使用异步请求绑定下拉框
//当学院下拉框发生改变的时候 年级、班级下拉框的变化
function bindFormSpecialtyAndClass () {
var academeID = $("#academeID").val();
//根据学院查询专业
//--------------方法二-----------------
createSelect("specialtyID ", "@Url.Content("~/BaseInfoManage/Class/SelectSpecialtyForSelect")", { academeID: academeID });
//-------------方法一----------------
//在查询之前清空数据（点击学院信息后，更改学院信息时，清空数据）
//JQuery的empty() 清除数据
//清空数据影响太大了，导致"----请选择----"页面选择开头模板消失
$("#specialtyID").empty();
//添加页面选择开头模板"----请选择----"
$("#specialtyID").append('<option value="0">----请选择----</option>');
//出现500错误 ，常见的500错误，一般是因为没有传参数
//academeID ：是Json格式，直接传变量，后面无法处理 无法处理的数据会被扔掉，所以出现没有传参的数据错误
$.post("@Url.Content("~/BaseInfoManage/Class/SelectSpecialtyForSelect")", { academeID: academeID }, function (jsonObj) {
for (var i = 0; i < jsonObj.length; i++) {
$("#specialtyID").append('<option value="' + jsonObj[i].specialtyID + '">' + jsonObj[i].specialtyName + '</option>');
}
});
//根据学院查询年级
//--------------方法二-----------------
createSelect("gradeID", "@Url.Content("~/BaseInfoManage/Class/SelectGradeForSelect")", { academeID: academeID });
//-------------方法一----------------
//在查询之前清空数据（点击学院信息后，更改学院信息时，清空数据）
//清空数据影响太大了，导致"----请选择----"页面选择开头模板消失
$("#gradeID ").empty();
//添加页面选择开头模板"----请选择----"
$("#gradeID").append('<option value="0">----请选择----</option>');
$.post("@Url.Content("~/BaseInfoManage/Class/SelectGradeForSelect")", { academeID: academeID }, function (jsonObj) {
for (var i = 0; i < jsonObj.length; i++) {
$("#gradeID").append('<option value="' + jsonObj[i].gradeID + '">' + jsonObj[i].gradeName + '</option>');
}
});
}
//---------------------方法二------------------------
//根据参数将共通的代码/数据 提取成方法 后面共通调用 （封装方法）
//抽取方法
//创建下拉框
//下拉框元素的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('<option value="0">----请选择----</option>');
}
} else {
$("#" + selectIds).empty();
$("#" + selectIds).append('<option value="0">----请选择----</option>');
}
//请求 生成option
$.post(url, params, function (jsonObj) {
for (var i = 0; i < jsonObj.length; i++) {
var strOption = '<option value="' + jsonObj[i].value + '">' + jsonObj[i].text + '</option>';
//判断是否是数组
//注意循环的变量，循环变量一致会导致死循环
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);
}
}
});
}
二、控制器代码
//-------------方法一------------
/// <summary>
/// 查询学院信息for下拉框
/// </summary>
/// <returns></returns>
public ActionResult SelectAcademeForSelect()
{
List<SYS_Academe> list = myModel.SYS_Academe.ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// 查询专业信息for下拉框
/// </summary>
/// <param name="academeID">条件</param>
/// <returns></returns>
public ActionResult SelectSpecialtyForSelect(int academeID)
{
List<SYS_Specialty> list = myModel.SYS_Specialty
//查询条件
.Where(o => o.academeID == academeID)
.ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// 查询年级信息for下拉框
/// </summary>
/// <param name="academeID">条件</param>
/// <returns></returns>
public ActionResult SelectGradeForSelect(int academeID)
{
List<SYS_Grade> list = myModel.SYS_Grade
.Where(o => o.academeID == academeID)
.ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
//---------------方法二---------------
//根据 SelectVo 新建类统一格式
/// <summary>
/// 查询学院信息for下拉框
/// 转成共通格式
/// </summary>
/// <returns></returns>
public ActionResult SelectAcademeForSelect()
{
List<SelectVo> list = (from tabAcademe in myModel.SYS_Academe
select new SelectVo
{
value = tabAcademe.academeID,
text = tabAcademe.academeName,
}).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// 查询专业信息for下拉框
/// </summary>
/// <param name="academeID">条件</param>
/// <returns></returns>
public ActionResult SelectSpecialtyForSelect(int academeID)
{
List<SelectVo> list = (from tabSpecialty in myModel.SYS_Specialty
where tabSpecialty.academeID == academeID
select new SelectVo
{
value = tabSpecialty.specialtyID,
text = tabSpecialty.specialtyName,
}).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// 查询年级信息for下拉框
/// </summary>
/// <param name="academeID">条件</param>
/// <returns></returns>
public ActionResult SelectGradeForSelect(int academeID)
{
List<SelectVo> list = (from tabGrade in myModel.SYS_Grade
where tabGrade.academeID == academeID
select new SelectVo
{
value = tabGrade.gradeID,
text = tabGrade.gradeName,
}).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
课外知识点：
1、<SYS_Academe> 是关于项目的数据表单
2、<SelectVo> 是外部创建的类，查询数据时，存放表单里没有但是项目需要的数据