下拉框的改变事件

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

change事件

（父与子的关系）

change事件就是在当元素的值发生改变时，就会触发change事件。

是由两个下拉框形成的，当A下拉框发生改变时触发B，B下拉框才能改变。如果A下拉框不发生改变，则B下拉框也不发生改变。

下截图是准备了两个下拉框，A（公告类型）下拉框页面加载的时候就出现“—请选择”，而B（类型明细）下拉框则没有，是因为A下拉框还没发生改变。

jquery修改下拉框选中 jquery 下拉框变更事件_jquery修改下拉框选中


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

jquery修改下拉框选中 jquery 下拉框变更事件_下拉框的改变事件_02


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

jquery修改下拉框选中 jquery 下拉框变更事件_页面加载_03


第一步：还是在控制器定义方法，查询下拉框数据的表，用的是单表查询：我们要查询的是公告类型的数据，就查询公告类型那张表。

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，第二个就是控制器那边查询数据的方法，这样就可先绑定公告类型下拉框数据绑定了，先看看下面的截图：

jquery修改下拉框选中 jquery 下拉框变更事件_数据_04


上截图的公告类型是有数据的，证明他获取成功了，而类型明细没数据是我们还没获取，接下来我们就获取，并且该他改变事件。

<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事件改变之后再检查一次，看看数据是否绑定成功，保存然后页面刷新，下截图的类型明细有数据了，但不能确定是否成功，首先是公告类型有数据，选中公告类型中的数据，类型明细才会有数据，也就是说当父元素发生改变，子元素随之改变，下截图是数据绑定成功的。

jquery修改下拉框选中 jquery 下拉框变更事件_数据_05


简单的下拉框数据绑定改变事件，主要有两步，查询和（定义方法,引用方法，再使用方法）

下拉框的改变事件方法之一就是这样完成的。