当前位置 博文首页 > 浮若星光的博客:下拉框绑定及改变事件

    浮若星光的博客:下拉框绑定及改变事件

    作者:[db:作者] 时间:2021-06-26 15:40

    在项目中添加信息时会遇到很多的文本框及下拉框,最初下拉框是无数据的,需要我们绑定数据库的值才能让我们选择数据,下面我先演示下拉框的绑定
    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事件,当任何一个改变后,折后价的值都会改变
    ![

    • 在这里插入图片描述

    ](https://img-blog.csdnimg.cn/20210503102552239.png)

    下一篇:没有了