下拉框的改变事件

下拉框的改变事件

开发工具与关键技术：VS、下拉框的改变事件
作者：黄桂康
撰写时间：2019.04.15

change事件
（父与子的关系）
change事件就是在当元素的值发生改变时，就会触发change事件。
是由两个下拉框形成的，当A下拉框发生改变时触发B，B下拉框才能改变。如果A下拉框不发生改变，则B下拉框也不发生改变。
下截图是准备了两个下拉框，A（公告类型）下拉框页面加载的时候就出现“—请选择”，而B（类型明细）下拉框则没有，是因为A下拉框还没发生改变。

当A下拉框发生改变时，如下截图：

父元素发生改变，子元素也随之改变。整体的内容就这样！下面开始进入代码。

第一步：还是在控制器定义方法，查询下拉框数据的表，用的是单表查询：我们要查询的是公告类型的数据，就查询公告类型那张表。
public ActionResult SelectNoticeType(){
var listSelectNoticeType = (from tbNoticeType in myModels.SYS_NoticeTypeTable
select new {
id = tbNoticeType.NoticeTypeID,
text = tbNoticeType.NoticeTypeName,
}).ToList();
return Json(listSelectNoticeType,JsonRequestBehavior.AllowGet);
}//查询公告类型
注意：用Models要记得先实例化Models.
既然是要用两个下拉框，A.B下拉框，上面是查询公告类型的数据，那就还要查询类型明细的数据，如下：和公告类型也是一样，就表不一样，字段不一样…
public ActionResult SelectNoticeTypeDetail(){
var listSelectNoticeTypeDetail = ( from tbNoticeTypeDetail in myModels.
SYS_NoticeTypeDetail select new {
Id = tbNoticeTypeDetail.NoticeTypeDetailID,
Text = tbNoticeTypeDetail.NoticeTypeDetailName,
}).ToList();
return Json(listSelectNoticeTypeDetail,JsonRequestBehavior.AllowGet);
}//查询类型明细
第一步主要的就是查询。
第二步：获取方法/数据，回到html页面，在script标签里面，我们要的是页面一加载就出现执行我们的效果，所以就定义一个加载事件，
$(document).ready(function(){
//行为内容
})//页面加载事件
当然啦！我们一般都是写简写模式的页面加载事件。直接定义。
<script src = “`/Content/js/customfunction.js”>//定义JS
$(function(){
createSelect（”selectNoticeType”,”SelectNoticeType”）;//公告类型下拉框
KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲selectNoticeTyp…(“#selectNoticeType”).val();
createSelect(“selectNoticeTpeDetail”,”SelectNoticeTypeDetailForSelect?noticeType=” + noticeTypeId);
});

})
//本文用的是自己定义的JS，然后再里面事先定义一个方法，就是下拉框样式的方法，然后再在外面获取这个方法。页面加载，利用事先定义好的方法createSelect，第一个是获取下拉框ID，第二个就是控制器那边查询数据的方法，这样就可先绑定公告类型下拉框数据绑定了，先看看下面的截图：

上截图的公告类型是有数据的，证明他获取成功了，而类型明细没数据是我们还没获取，接下来我们就获取，并且该他改变事件。
<script src = “`/Content/js/customfunction.js”>//定义JS
$(function(){
createSelect（”selectNoticeType”,”SelectNoticeType”）;//公告类型下拉框
KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲selectNoticeTyp…(“#selectNoticeType”).val();
createSelect(“selectNoticeTpeDetail”,”SelectNoticeTypeDetailForSelect?noticeType=” + noticeTypeId);//获取方法，然后就是类型明细它的ID和查询方法。
});
})
change事件改变之后再检查一次，看看数据是否绑定成功，保存然后页面刷新，下截图的类型明细有数据了，但不能确定是否成功，首先是公告类型有数据，选中公告类型中的数据，类型明细才会有数据，也就是说当父元素发生改变，子元素随之改变，下截图是数据绑定成功的。

简单的下拉框数据绑定改变事件，主要有两步，查询和（定义方法,引用方法，再使用方法）
下拉框的改变事件方法之一就是这样完成的。