下拉框绑定及改变事件

最新推荐文章于 2023-04-12 11:11:45 发布

原创最新推荐文章于 2023-04-12 11:11:45 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#下拉框事件 #change改变事件

本文介绍了如何在项目中使用Jquery绑定下拉框数据，详细讲解了在Visual Studio 2015环境下，如何在页面加载时通过Ajax调用控制器方法绑定下拉框，并展示了使用change事件监听下拉框选择变化，动态回填相关数据和计算折后价的过程。

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

                             下拉框绑定及改变事件

开发工具与关键技术： Visual Studio 2015 – Jquery
作者：廖亚星
撰写时间：2019年 6 月 27 日

在项目中添加信息时会遇到很多的文本框及下拉框，最初下拉框是无数据的，需要我们绑定数据库的值才能让我们选择数据，下面我先演示下拉框的绑定
Select下拉框:

首先在页面加载事件中绑定ID及方法
$(document).ready(function () {
appendOption(“VIPCategoryManagementID”," /MembershipManagement/SelectCategory");
});

然后在控制器中定义方法
public ActionResult SelectCategory()
{
var listCategory = from tbVIPCategoryManagement in myModel.D_VIPCategoryManagement
select new
{
id = tbVIPCategoryManagement.VIPCategoryManagementID,
text = tbVIPCategoryManagement.TypeName
};
return Json(listCategory, JsonRequestBehavior.AllowGet);
}
这样下拉框就绑定数据了
在这里插入图片描述
项目中当下拉框选择后，后面会回填相对应的折扣，这时候就需要改变(change)事件
//下拉框改变事件
$("#VIPCategoryManagementID").change(function () {
var VIPCategoryManagementID = $("#VIPCategoryManagementID").val()
$.post("/MembershipManagement/SelectDefaultDiscount", { VIPCategoryManagementID:
VIPCategoryManagementID }, function (date) {
$("#DefaultDiscount").val(date.text);
});
})
控制器中也要查询出折扣
public ActionResult SelectDefaultDiscount(int VIPCategoryManagementID)
{
var listDefaultDiscount = (from tbVIPCategoryManagement in myModel.D_VIPCategoryManagement
where tbVIPCategoryManagement.VIPCategoryManagementID == VIPCategoryManagementID
select new
{
text = tbVIPCategoryManagement.DefaultDiscount.ToString()
}).Single();
return Json(listDefaultDiscount, JsonRequestBehavior.AllowGet);
}
这样当下拉框选择后，对应折扣也会回填
在这里插入图片描述
最后一个改变事件是对于项目中售价的计算
当吊牌价通过销售折扣打折后会自动生成折后价
吊牌价和销售折扣都可以自行改变并得出折后价
那么change事件就可以做出这样的效果
$("#DPJtext").change(function () {
var DPJtext = $("#DPJtext").val();
var XSZKtext = $("#XSZKtext").val();
$("#DPJtext").val(DPJtext);
$("#XSZKtext").val(XSZKtext);
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲ZHJtext").val($ ("#DPJtext").val() * $("#XSZKtext").val());
})
首先给吊牌价的文本框一个改变事件，然后申明一个值来获取吊牌价、销售折扣的内容，然后把申明的值赋值进吊牌价、销售折扣里面，然后在折后价的val中把吊牌价与销售折扣相乘就可以了。
这仅仅是吊牌价的改变才会使折后价改变还要给销售折扣一个change事件
$("#XSZKtext").change(function () {
var DPJtext = $("#DPJtext").val();
var XSZKtext = $("#XSZKtext").val();
$("#DPJtext").val(DPJtext);
$("#XSZKtext").val(XSZKtext);
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲ZHJtext").val($ ("#DPJtext").val() * $("#XSZKtext").val());
})
这样两个change事件，当任何一个改变后,折后价的值都会改变
在这里插入图片描述