How to get Jquery selected option

How to get Jquery selected option

Here we will see how to get Text and value of selected option. we will populate dropdown with some text and value items.

JQuery Selected Option Text Example

$(“#DropDownListID”).find(":selected").text();

JQuery Selected Option Value Example

$(“#DropdownListID”).find(":selected").val();

Description

.find(“:selected”) searches for selected items of given options. .text() returns text part and .val() function returns value part of list item.

JQuery Get Text and Value of selected dropdown list

<script type="text/javascript" language="javascript"> 
   
   $("document").ready(function(){
   
   $("#DropDownList").change(function(){
   
      // Get selected element Text.
      
      alert( "Selected Text is: " + $(this).find(":selected").text() );
      
      // Get selected element Value.
      
      alert ( "Selected Value is: " + $(this).find(":selected").val() );
        
   });           
        
    });
    
</script>

Complete example of getting selected value and text from dropdown list or combo box

<html>
<head>
    <title>JQuery Get dropdown selected text and value</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    <script type="text/javascript" language="javascript"> 
   
       $("document").ready(function(){
       
       $("#DropDownList").change(function(){
       
          // Get selected element Text.
          
          alert( "Selected Text is: " + $(this).find(":selected").text() );
          
          // Get selected element Value.
          
          alert ( "Selected Value is: " + $(this).find(":selected").val() );
            
       });           
            
        });
        
    </script>

</head>
<body>
   <select id="DropDownList" name="DropDownList">
        <option selected="selected" value="Asp.net">Asp.net</option>
        <option value="C# 1">C#</option>
        <option value=".Net 2">.Net</option>
        <option value="JQuery 3">JQuery</option>
        <option value="JavaScript 4">JavaScrpt</option>
        <option value="MVC 5">MVC</option>
        <option value="SilverLight 6">SilverLight</option>
        <option value="MVP 7">MVP</option>
        <option value="WCF 8" >WCF</option>
        <option value="MS SQL Server 9">MS SQL Server</option>
        <option value="BI 10">BI</option>
        <option value="SSIS 11">SSIS</option>
        <option value="SSRS 12">SSRS</option>
        <option value="SSAS 13">SSAS</option>
        <option value="MVVM 14">MVVM</option>
        <option></option>
    </select> 
</body>
</html>

Isn’t it that simple to get value and text of selected list items from dropdown or list box or combo box?

You can copy the code in notepad and save it as demo.html and open it in browser to see how it works.

Jquery Dropdown Selected ValueGet Selected Value From Dropdownlist [JQuery]Jquery Get Target Of EventBasics of jqueryLearning JqueryJquery Gridview Dropdownlist Selected Change Enable Disable ControlsJQuery Get Element By ID or class name or tag nameJQuery Hidden Field Set ValueJQuery Get .next() ElementJQuery Select ChangeJQuery get Value Of Textarea

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.