Запуск функции Javascript при изменении события выпадающего списка

#javascript #jquery #asp.net

#javascript #jquery #asp.net

Вопрос:

Я использую приведенный ниже код JavaScript для получения итогов строк и общего итога в виде таблицы

но проблема $Cost в том, что значение поступает из выпадающего списка dllcost

поэтому, когда я изменяю стоимость затрат с помощью выпадающего списка, итоговые значения не обновляются на основе выбранной стоимости затрат.

Код JavaScript

 <script>
    $(document).ready(function () {
        $(".txtMult input").on('keyup mouseup', multInputs);
        function multInputs() {
            var $mult = 0;
            var $mgrandvalue = 0;
            $("tr.txtMult:gt(0):lt(-1)").each(function () {
                var $Cost = $('.Cost', this).val();
                var $MarketValue = $('.MarketValue', this).val();
                var $Quantity = $('.Quantity', this).val();
                var $total = $Cost * $Quantity;
                var $mvalue = $MarketValue * $Quantity;
                $mult  = $total;
                $mgrandvalue  = $mvalue;

                $('.multTotal', this).text($total.toFixed(2));
                $('.mvalue', this).text($mvalue.toFixed(2));
            });
            $(".lblGrandCost").text($mult.toFixed(2));

            $(".lblGrandmvalue").text($mgrandvalue.toFixed(2));
        }
    });
</script>
 

Просмотр сетки

 <asp:GridView ID="griditem" OnRowDataBound="griditem_RowDataBound" CssClass="table table-borded text-nowrap" GridLines="None" runat="server" ShowFooter="True" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderStyle-Width="225" ControlStyle-Width="225" HeaderText="Item">
            <ItemTemplate>
                <asp:DropDownList DataValueField="ItemID" AutoPostBack="true" OnSelectedIndexChanged="dllitem_SelectedIndexChanged" DataTextField="ItemName" ID="dllitem" CssClass="form-control" runat="server"></asp:DropDownList>
            </ItemTemplate>
            <HeaderStyle />
        </asp:TemplateField>

        <asp:TemplateField HeaderStyle-Width="225" ControlStyle-Width="225" HeaderText="Cost">
            <ItemTemplate>
                <asp:DropDownList ID="dllcost" CssClass="form-control Cost" runat="server"></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderStyle-Width="109" ControlStyle-Width="109" HeaderText="Market Value">
            <ItemTemplate>
                <asp:TextBox ID="txtmvalue" TextMode="Number" min="0" step="any" CssClass="form-control MarketValue" runat="server"></asp:TextBox>
            </ItemTemplate>

        </asp:TemplateField>
        <asp:TemplateField HeaderStyle-Width="109" ControlStyle-Width="109" HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtQuantity" TextMode="Number" min="0" CssClass="form-control Quantity" runat="server"></asp:TextBox>
            </ItemTemplate>

        </asp:TemplateField>
        <asp:TemplateField HeaderStyle-Width="50" HeaderText="Total Cost">
            <ItemTemplate>
                <asp:Label ID="lbltotalcost" CssClass="multTotal" runat="server"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="lblgrandcost" Text="" runat="server" CssClass="lblGrandCost" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderStyle-Width="50" HeaderText="Total M.Value">
            <ItemTemplate>
                <asp:Label ID="lbltotalmv" CssClass="mvalue" runat="server"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="lbltotalmvfooter" Text="" runat="server" CssClass="lblGrandmvalue" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView> 
 

Ответ №1:

Вам нужно добавить событие изменения для выпадающего списка, как показано ниже.

 $(".txtMult select").on('change', multInputs);
 

Комментарии:

1. Привет, но мне нужно использовать как текстовое поле, так и выпадающий список

2. я сделал это, но не сработал $(«.txtMult выбор ввода»).on(‘изменение нажатия клавиши мыши’, multInputs);