Question

我有一个名为ShippingList的DropDownList，当选择一个值时，我想将该值传递给变量simpleCart.shippingFlatRate。我尝试创建一个var并获取所选值，然后传递该var，但由于某种原因，var shipList保持为null（Firebug控制台）。我是asp.net的新手，这是我第一次使用javascript，所以我有点卡住了，这是传递价值的最简单/最简单的方法吗？

<script type="text/javascript">
    simpleCart.email = "abc@gmail.com";
    simpleCart.currency = "EUR";
    simpleCart.cartHeaders = ["Name_noHeader", "Price_noHeader", "increment_noHeader", "Quantity_input_noHeader", "decrement_noHeader_noHeader", "Remove_noHeader", "Total_noHeader"];
    var shipList = document.getElementById('<%=ShippingList.ClientID%>');
    var shipCost = shipList.options[shipList.selectedIndex].value;
    simpleCart.shippingFlatRate = shipCost;
</script>

编辑所有标记：

    <%@ Page Title="" Language="C#" MasterPageFile="~/Standardmaster.Master" AutoEventWireup="true" CodeBehind="WebShop.aspx.cs" Inherits="PetShopParadise.Customer_Pages.WebShop" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" runat="server">



<script type="text/javascript" src="/simpleCart.js"></script>


    <h2>
        Welcome to the Web Shop of 
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        !</h2>

    <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
        ConnectionString="<%$ ConnectionStrings:PetShopParadiseConnectionString %>" 
        SelectCommand="SELECT [Name] FROM [Vendors] WHERE ([VendorID] = @VendorID)">
        <SelectParameters>
            <asp:QueryStringParameter Name="VendorID" QueryStringField="VendID" 
                Type="Decimal" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:GridView ID="ProductsGrid" runat="server" AllowSorting="True" 
        DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="ProductID" >
        <Columns>
            <asp:BoundField DataField="ProductID" HeaderText="ProductID" 
                SortExpression="ProductID" InsertVisible="False" ReadOnly="True" />
            <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
            <asp:BoundField DataField="Type" HeaderText="Type" 
                SortExpression="Type" />
            <asp:BoundField DataField="Description" HeaderText="Description" 
                SortExpression="Description" />
            <asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />
            <asp:TemplateField HeaderText="Image">
            <ItemTemplate>
            <a href="javascript:void(window.open('<%# "/FullImage.ashx?ProductID="+ Eval("ProductID")%>','_blank','toolbar=no,menubar=no'))" > <asp:Image ID="Image1" runat="server" ImageUrl='<%# "/Thumbnails.ashx?ProductID="+ Eval("ProductID")  %>'/> </a>
            </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
            <ItemTemplate>
            <a href="javascript:;" onclick="simpleCart.add( 'name=<%# Eval("Name") %>' , 'price=<%# Eval("Price") %>' , 'quantity=1' );">Add To Cart</a>
            </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

    <br />

    <br />
    <div id="LocationDetails">
        <asp:Label ID="Label2" runat="server" Text="Choose Location"></asp:Label><asp:DropDownList
            ID="ShippingList" runat="server" 
            onselectedindexchanged="ShippingList_SelectedIndexChanged" 
            AutoPostBack="True">
            <asp:ListItem Value="5" Text="Europe"></asp:ListItem>
            <asp:ListItem Value="10">Asia</asp:ListItem>
            <asp:ListItem Value="8">America</asp:ListItem>
            <asp:ListItem Value="12">Africa</asp:ListItem>
            <asp:ListItem Value="15">Rest of the World</asp:ListItem>
        </asp:DropDownList>



 <script type="text/javascript">
        simpleCart.email = "abc@gmail.com";
        simpleCart.currency = "EUR";
        simpleCart.cartHeaders = ["Name_noHeader", "Price_noHeader", "increment_noHeader", "Quantity_input_noHeader", "decrement_noHeader_noHeader", "Remove_noHeader", "Total_noHeader"];
        var shipList = document.getElementById('<%=ShippingList.ClientID%>');
        var shipCost = shipList.options[shipList.selectedIndex].value;
        simpleCart.shippingFlatRate = shipCost;
    </script>

        <br />
        <asp:Label ID="Label3" runat="server" Text="Shipping Cost"></asp:Label>
        <asp:TextBox
            ID="ShippingCostBox" runat="server"></asp:TextBox>

    </div>

    <div id="cartTotal">
    <strong>Total: </strong> <span class="simpleCart_total"></span></div>

    <div class="simpleCart_items"></div>

    <div class="CartOptions"><a href="javascript:;" class="simpleCart_checkout">Checkout</a>
    <a href="javascript:;" class="simpleCart_empty">Empty</a></div>   



    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:PetShopParadiseConnectionString %>" 

        SelectCommand="SELECT [ProductID], [Name], [Type], [Description], [Price], [Image] FROM [Products] WHERE ([VendorIDF] = @VendorIDF)" 
        OldValuesParameterFormatString="original_{0}" 
        ConflictDetection="CompareAllValues" >

        <SelectParameters>


            <asp:QueryStringParameter Type="Int32" 
            Name="VendorIDF" 
            QueryStringField="VendID" />

        </SelectParameters>

    </asp:SqlDataSource>


</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="bannerContent" runat="server">
</asp:Content>

Answer 1

确保在创建ShippingList下拉列表后调用此javascript块。您可以通过移动标记下拉列表下方的块或在窗口完成加载时调用它来完成此操作。

修改

试试这个：

<script type="text/javascript">
    window.onload = function() {
        simpleCart.email = "abc@testemail.com";
        simpleCart.currency = "EUR";
        simpleCart.cartHeaders = ["Name_noHeader", "Price_noHeader", 
                                  "increment_noHeader", "Quantity_input_noHeader", 
                                  "decrement_noHeader_noHeader", "Remove_noHeader", 
                                  "Total_noHeader"];
        var shipList = document.getElementById('<%=ShippingList.ClientID%>');
        var shipCost = shipList.options[shipList.selectedIndex].value;
        simpleCart.shippingFlatRate = shipCost;
    }
</script>

Answer 2

如果您使用JQuery，那么您将获得所需的输出：

$(document).ready(function() {
    simpleCart.email = "kentzia@gmail.com";
    simpleCart.currency = "EUR";
    simpleCart.cartHeaders = ["Name_noHeader", "Price_noHeader", 
                              "increment_noHeader", "Quantity_input_noHeader", 
                              "decrement_noHeader_noHeader", "Remove_noHeader", 
                              "Total_noHeader"];
    var shipList = document.getElementById('<%=ShippingList.ClientID%>');
    var shipCost = shipList.options[shipList.selectedIndex].value;
    simpleCart.shippingFlatRate = shipCost;
});

在javascript中获取DropDownList值

2 个答案:

修改