Get DropDownList value in javascript

Question

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?

<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>

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 = "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

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.

Edit

Try this:

<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

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

$(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;
});