Home Asp.net Get Selected Text Value from DropDownList in Asp.net using JavaScript

Get Selected Text Value from DropDownList in Asp.net using JavaScript

90
1
Get selected text value from dropdown in asp.net javascript
Get selected text value from dropdown in asp.net javascript

Now here in this tutorial, I’ll explain how you can get selected text value from dropdownlist from client-side using onchange event and display selected text in asp.net label using JavaScript.

In my previous tutorials, I’d explained how to get selected text from dropdown and set to asp.net label using jquery, how to show confirm message box using javascript, how to show alert message from code-behind, how to call javascript function from code-behind and more cracking tutorials on Asp.net, JavaScript, jQuery here.

We can get selected text value from dropdown or asp.net dropdownlist using JavaScript onchange event from client-side. This method will call automatically when we change the dropdown selected index or value.

Function To Get DropDownList Text Value – [JavaScript]

Following is the JavaScript code that will return the selected value or text from the dropdown list with validation:

<script type="text/javascript">
    function GetSelectedSubject(e) {
        //get label controls to set value/text
        var lblSelectedText = document.getElementById("lblSelectedText");
        var lblSelectedValue = document.getElementById("lblSelectedValue");

        //get selected value and check if subject is selected else show alert box
        var SelectedValue = e.options[e.selectedIndex].value;
        if (SelectedValue > 0) {
            //get selected text and set to label
            var SelectedText = e.options[e.selectedIndex].text;
            lblSelectedText.innerHTML = SelectedText;

            //set selected value to label
            lblSelectedValue.innerHTML = SelectedValue;
        } else {
            //reset label values and show alert
            lblSelectedText.innerHTML = "";
            lblSelectedValue.innerHTML = "";
            alert("Please select valid subject.");
        }
    }
</script>

And here is a DropDownList with onchange event:

<asp:DropDownList ID="ddlSubject" runat="server" 
    onchange="GetSelectedSubject(this);" ClientIDMode="Static">
    <asp:ListItem Value="0" Text="Please select" />
    <asp:ListItem Value="1" Text="HTML" />
    <asp:ListItem Value="2" Text="CSS" />
    <asp:ListItem Value="3" Text="JavaScript" />
    <asp:ListItem Value="4" Text="jQuery" />
    <asp:ListItem Value="5" Text="Asp.net" />
    <asp:ListItem Value="6" Text="PHP" />
    <asp:ListItem Value="7" Text="Android" />
</asp:DropDownList>

As you can see that, I’ve passed dropdownlist event object as this in GetSelectedSubject() method and that is needed here to get selected value or text from the dropdownlist. Also make sure you that have added ClientIDMode=”Static” propery of dropdown to access in JavaScript with it’s unique name.

Get Selected Text Value from DropDownList in Asp.net – [.aspx]

Following is the complete HTML Markup code that I used for the demonstration:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Get DropDownList Value or Text using JavaScript</title>
    <script type="text/javascript">
        function GetSelectedSubject(e) {
            //get label controls to set value/text
            var lblSelectedText = document.getElementById("lblSelectedText");
            var lblSelectedValue = document.getElementById("lblSelectedValue");

            //get selected value and check if subject is selected else show alert box
            var SelectedValue = e.options[e.selectedIndex].value;
            if (SelectedValue > 0) {
                //get selected text and set to label
                var SelectedText = e.options[e.selectedIndex].text;
                lblSelectedText.innerHTML = SelectedText;

                //set selected value to label
                lblSelectedValue.innerHTML = SelectedValue;
            } else {
                //reset label values and show alert
                lblSelectedText.innerHTML = "";
                lblSelectedValue.innerHTML = "";
                alert("Please select valid subject.");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>Select any Subject</td>
            <td>:</td>
            <td>
                <asp:DropDownList ID="ddlSubject" runat="server" 
                    onchange="GetSelectedSubject(this);" ClientIDMode="Static">
                    <asp:ListItem Value="0" Text="Please select" />
                    <asp:ListItem Value="1" Text="HTML" />
                    <asp:ListItem Value="2" Text="CSS" />
                    <asp:ListItem Value="3" Text="JavaScript" />
                    <asp:ListItem Value="4" Text="jQuery" />
                    <asp:ListItem Value="5" Text="Asp.net" />
                    <asp:ListItem Value="6" Text="PHP" />
                    <asp:ListItem Value="7" Text="Android" />
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td colspan="3">&nbsp;&nbsp;</td>
        </tr>
        <tr>
            <td>You have selected(Text)</td>
            <td>:</td>
            <td>
                <asp:Label ID="lblSelectedText" runat="server" ClientIDMode="Static">
                </asp:Label>
            </td>
        </tr>
        <tr>
            <td colspan="3">&nbsp;&nbsp;</td>
        </tr>
        <tr>
            <td>You have selected(Value)</td>
            <td>:</td>
            <td>
                <asp:Label ID="lblSelectedValue" runat="server" ClientIDMode="Static">
                </asp:Label>
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

Example Result

Get selected text value from dropdown in asp.net javascript
Get selected text value from dropdown in asp.net javascript

Download Example

Git Repo

That’s it, this is one of the simplest way to get selected text value from dropdownlist in asp.net using javascript or jquery.

Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.

Happy Coding!

Previous articleHow to Give jQuery fadeIn and fadeOut Effect to Text in Div?
Next articleHow to split string into Array of Day, Month, Year in Asp.net Using C# Vb.net [Solved]
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

1 COMMENT

  1. Hi,

    For example, if we make 3 labels?

    ID, Name, Date, ON / OFF. Value and text full. How to show on label example date or State ON/OFF. (true,false)

    Thanks

LEAVE A REPLY

Please enter your comment!
Please enter your name here

20 + twelve =