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

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.


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()"})



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

Hope this can help you.

Share this

About the Author

Rahul Kumar Jha
Rahul Kumar Jha
Founder, Developer

Public profile: user/profile/99900001

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, ANGULAR, ANGULAR JS, 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.

User's Comments

Please SignUp/Login to comment...

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