下拉框改变事件

最新推荐文章于 2022-10-04 21:41:19 发布

大cheng

最新推荐文章于 2022-10-04 21:41:19 发布

阅读量1.3w

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44543433/article/details/93891124

本文讲述了作为一名开发人员如何通过JavaScript的change事件来响应下拉框选择的改变，进而实现动态查询数据库并返回对应信息。通过控制器的Action方法获取选择的ID，结合数据绑定，当下拉框值改变时查询相应的检查项目详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目的基本素养那就是完完全全按照客户的需求完成任务，身为一名开发人员，不仅要实现各种各样的app功能，还要学会变通，不仅需要将代码简化，更要使功能完善化，使用便捷化。当然，短期时间是不可能训练成为这样专业又有高级职业素养的程序员，所以呢，凡是重在积累，人的语言能力并不是天生就有的，而是通过一朝一夕，耳濡目染，反复使用，才能训练出一定的能力。言归正传，既然要一点一滴积累，那就从基础开始学习。一开始学习js，就有接触各种事件，熟悉的鼠标事件（单击、双击等）、键盘事件、监听事件等。就像是数学公式一样，前人研究出来，只需要我们恰当地运用，解决自己的问题嘛！

举个列子，我们都知道，change（）改变事件，即当元素的值发生改变时，会发生 change 事件。最简单的举例就是下拉框了，下拉框数据改变，触发change（）改变事件。

在这里插入图片描述

代码很容易理解，change（）改变事件绑定一个元素，元素id为checkNum，如果该元素的值发生改变，那么触发改变事件，执行改变事件之后需要完成的代码功能，本例就是通过绑定的下拉框值的改变，在数据库查询出对应检查项目的详细信息，并且返回到页面。

控制器查询检查项目：

public ActionResult selectCheckItem(int CheckItemID)

S_CheckItem checkItem = (from tbCheckItem in myModels.S_CheckItem

                                 where

tbCheckItem.CheckItemID == CheckItemID

                                 select

tbCheckItem).Single();

        return

Json(checkItem, JsonRequestBehavior.AllowGet);

检查项目下拉框数据绑定：

public ActionResult selectItem()

    {

        List<SelectVo> listItem =

(from tbItem in myModels.S_CheckItem

                                   select

new SelectVo

                                   {

                                       id =

tbItem.CheckItemID,

                                       text

= tbItem.itemNumber//项目编号

}).ToList();

        //拼接“请选择”项

        listItem =

Common.Tools.SetSelectJson(listItem);

        return Json(listItem, JsonRequestBehavior.AllowGet);

    }

下拉框数据改变，说明绑定的数据的id也在变化，那么就可以根据id查询对应的某一条检查项目信息，返回视图即可。

效果：
在这里插入图片描述