下拉框绑定及改变事件

本文介绍了如何在项目中使用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事件,当任何一个改变后,折后价的值都会改变
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值