Javascript 在javascript中获取DropDownList值

Get DropDownList value in javascript

提问by Matt

I have a DropDownList called ShippingList and when a value is selected, I want to pass that value into the variable simpleCart.shippingFlatRate. I tried creating a var and getting the selected value and then passing that var, but for some reason var shipList remains null (Firebug console). I am new to asp.net and this is my first time using javascript, so I'm kinda stuck, is this even the simplest/easiest way of passing the value?

I have a DropDownList called ShippingList and when a value is selected, I want to pass that value into the variable simpleCart.shippingFlatRate. 我尝试创建一个 var 并获取选定的值，然后传递该 var，但由于某种原因 var shipList 仍然为 null（Firebug 控制台）。我是 asp.net 的新手，这是我第一次使用 javascript，所以我有点卡住了，这是传递值的最简单/最简单的方法吗？

<script type="text/javascript">
    simpleCart.email = "[email protected]";
    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>

EDIT all the markup:

编辑所有标记：

    <%@ 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 = "[email protected]";
        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>

回答by kevev22

Ensure that this javascript block is called after the ShippingList dropdown is created. You can do this by moving the block below the dropdown in the markup or calling it when the window finishes loading.

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

Edit

编辑

Try this:

尝试这个：

<script type="text/javascript">
    window.onload = function() {
        simpleCart.email = "[email protected]";
        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>

回答by Elias Hossain

If you use JQuery then in below way you'll get desired output:

如果您使用 JQuery，那么您将通过以下方式获得所需的输出：

$(document).ready(function() {
    simpleCart.email = "[email protected]";
    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;
});