Home Asp.net Get Selected Text Value from DropDownList in Asp.net jQuery

Get Selected Text Value from DropDownList in Asp.net jQuery

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

In my previous tutorials, I’d explained get selected value or text of asp.net dropdownlist using javascript, get and set asp.net textbox value using jquery, how to split string date into day month and year from code-behind, validate dropdownlist using javascript and other more cracking tutorials on Asp.net, JavaScript, jQuery, GridView here.

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

First we need to give reference of jQuery under head section. You can simply use below line in head section of your .aspx page.

Add jQuery Reference

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

To get selected text value from dropdown or asp.net dropdownlist using jQuery, we need to bind the change event on document.ready function of jQuery.

jQuery Function To Get DropDownList Text Value

Following is the jQuery code that will return the selected value or text from the dropdownlist with validation:

<script type="text/javascript">
    $(document).ready(function () {
        //We are binding onchange event using jQuery built-in change event
        $('#ddlSubject').change(function () {
            //get selected value and check if subject is selected else show alert box
            var SelectedValue = $("#ddlSubject").val();
            if (SelectedValue > 0) {
                //get selected text and set to label
                var SelectedText = $("#ddlSubject option:selected").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>

As you can see that I’ve bind jQuery built-in change event on document.ready because we need to bind onchange event before using it. Your final code looks like as below:

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

Following is the complete HTML Markup code for .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Get DropDownList Value or Text using jQuery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //We are binding onchange event using jQuery built-in change event
            $('#ddlSubject').change(function () {
                //get selected value and check if subject is selected else show alert box
                var SelectedValue = $("#ddlSubject").val();
                if (SelectedValue > 0) {
                    //get selected text and set to label
                    var SelectedText = $("#ddlSubject option:selected").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" 
                            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 DropDownList in Asp.net jQuery
Get Selected Text Value from DropDownList in Asp.net jQuery

Download Example

Git Repo

Get Selected Text Value from DropDownList

That’s it, this is one of the best way to get selected value of dropdown list in .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 articleCSS3 Transition: fadeIn and fadeOut like Effects to Hide Show Elements
Next articleAsp.net TextBox: How to Get Set TextBox Value or Text in JavaScript
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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

eighteen − six =