下拉框的改变事件

浅浅的花香味﹌ 2022-04-24 06:02 170阅读 0赞

**下拉框的改变事件**

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

change事件  
（父与子的关系）  
change事件就是在当元素的值发生改变时，就会触发change事件。  
是由两个下拉框形成的，当A下拉框发生改变时触发B，B下拉框才能改变。如果A下拉框不发生改变，则B下拉框也不发生改变。  
下截图是准备了两个下拉框，A（公告类型）下拉框页面加载的时候就出现“—请选择”，而B（类型明细）下拉框则没有，是因为A下拉框还没发生改变。  
![在这里插入图片描述][2019041809005581.png]  
当A下拉框发生改变时，如下截图：  
![在这里插入图片描述][20190418090104230.png]  
父元素发生改变，子元素也随之改变。整体的内容就这样！下面开始进入代码。  
![在这里插入图片描述][20190418090113342.png]  
第一步：还是在控制器定义方法，查询下拉框数据的表，用的是单表查询：我们要查询的是公告类型的数据，就查询公告类型那张表。  
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，第二个就是控制器那边查询数据的方法，这样就可先绑定公告类型下拉框数据绑定了，先看看下面的截图：  
![在这里插入图片描述][20190418090129869.png]  
上截图的公告类型是有数据的，证明他获取成功了，而类型明细没数据是我们还没获取，接下来我们就获取，并且该他改变事件。  
<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事件改变之后再检查一次，看看数据是否绑定成功，保存然后页面刷新，下截图的类型明细有数据了，但不能确定是否成功，首先是公告类型有数据，选中公告类型中的数据，类型明细才会有数据，也就是说当父元素发生改变，子元素随之改变，下截图是数据绑定成功的。  
![在这里插入图片描述][20190418090143664.png]  
简单的下拉框数据绑定改变事件，主要有两步，查询和（定义方法,引用方法，再使用方法）  
下拉框的改变事件方法之一就是这样完成的。

[2019041809005581.png]: /images/20220218/0ff537b40a0e4629bb9ebbd63cb101c6.png
[20190418090104230.png]: /images/20220218/78d7dbb498b54d06aa919da241e74e63.png
[20190418090113342.png]: /images/20220218/87ff9cc163ad45d4b6f864b69375e739.png
[20190418090129869.png]: /images/20220218/90ba8b45b574417eb58c7e99a8050253.png
[20190418090143664.png]: /images/20220218/088bcdbcd98e479595c25db494f9d141.png