Rajesh Kamalakshan: How to get the selected values of dropdown (combobox) using JavaScript?

Friday, May 28, 2010

How to get the selected values of dropdown (combobox) using JavaScript?

The selected values of a dropdown (combobox) can be accessed by the values and text property of a dropdown’s (combobox) option object.

The option object has the following properties.

defaultSelected          Refers to the option that is selected by
                                 default from the select box.

index                         Refers to the zero-based indexed location
                                of an element in the Select.options array.

selected                     Refers to the selected value of
                                the select box.

text                            Refers to the text for the option.

value                          Refers to the value that is returned
                                  when the option is selected.

Accessing the value of a dropdown (combobox) is shown in the below example.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        DropDownList1.Attributes.Add("OnChange", "return OnChange()");
    }
    </script>
    <script language="javascript" type="text/javascript">
    function OnChange()
    {
    var Dropdoan=document .getElementById("<%=DropDownList1.ClientID  %>")
    alert(Dropdoan.options[Dropdoan.selectedIndex].value+'    '+Dropdoan.options[Dropdoan.selectedIndex].text );
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem Value="a">Rajesh</asp:ListItem>
        <asp:ListItem Value="b">Renjith</asp:ListItem>
        <asp:ListItem Value="c">Smitha</asp:ListItem>
    </asp:DropDownList>
    </div>
</form>
</body>
</html>

You can also get more information regarding various function and propertied of a dropdown (combobox) from the below link.
http://www.navioo.com/javascript/dhtml/Changing_Select_Element_Content_two_Combobox_2755.html

Rajesh Kamalakshan

Friday, May 28, 2010

How to get the selected values of dropdown (combobox) using JavaScript?

No comments:

Post a Comment