Please enable Javascript for better experience...
How to get SelectedValue and SelectedText in DropDownList using JQuery
By Big | Mar 7, 2015 | In Tips | Total Views [ 6445 ]
Taged In
(5 Like)
Rate

Here I will explain how to get dropdownlist selected value and selected text using JQuery.

The Problem

The problem is to get dropdownlist selected value and selected text using JQuery.

The Solution

You can get selected value with the help of val() function and selected text using text() method. Let see this with a simple example.

Html

Copy this code to add dropdown list to your page. I am using MVC Dropdown in this example. You can use any other as per your need.

        <div class="line_input">
            @Html.DropDownList("City", new SelectList(Model, "ID", "Description", 0), "---Select City----", new { @onchange = "showVal()"})

        </div>

JQuery

Add below lines of code to script.

Use $("#ctrlName").val() to get selected value and $("#ctrlName option:selected").text() to get selected text.

    <script src="Content/Script/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

        function showVal()
        {
            alert("Selected value is "+ $("#City").val()+ "and Selected Text is "+ $("#City option:selected").text());
        }
    </script>

Hope this can help you.

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment