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.