Jquery Dropdown Selected Value

Jquery Dropdown Selected Value

On Change of dropdown selected value we can perform several actions based on new selection. In this post we will see how to get selected value of Dropdown list. We will use JQuery to get Dropdown selected value.

<script type="text/javascript" language="javascript"> 
   
   $("document").ready(function(){
   
        $("#DropDownList").change(function(){
    
          $("#div1").append("<span>" + $(this).val() + " </span>");
          
        });    
    });
    
</script>

Description

In the above code we are attaching change event to dropdown ID “DropDownList” on document load event. When end user changes selected value of dropdown the function inside change event gets triggered. Here we are showing the selected value of dropdown inside div element.

DropDownList selected value example

<html>
<head>
    <title>JQuery Dropdown list selected value </title>

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

    <script type="text/javascript" language="javascript"> 
   
       $("document").ready(function(){
       
            $("#DropDownList").change(function(){
        
              $("#div1").append("<span>" + $(this).val() + " </span>");
              
            });    
        });
        
    </script>

</head>
<body>
    <div id="div1">
    </div>
    <select id="DropDownList" name="DropDownList">
        <option selected="selected" value="Asp.net">Asp.net</option>
        <option value="C#">C#</option>
        <option value=".Net">.Net</option>
        <option value="JQuery">JQuery</option>
        <option value="JavaScript">JavaScrpt</option>
        <option value="MVC">MVC</option>
        <option value="SilverLight">SilverLight</option>
        <option value="MVP">MVP</option>
        <option value="WCF">WCF</option>
        <option value="MS SQL Server">MS SQL Server</option>
        <option value="BI">BI</option>
        <option value="SSIS">SSIS</option>
        <option value="SSRS">SSRS</option>
        <option value="SSAS">SSAS</option>
        <option value="MVVM">MVVM</option>
        <option></option>
    </select>
</body>
</html>

On Button Click event Get selected value of dropdown list example.

In this example we will get the selected value of dropdown list on click of button id “button1”. We will attach click event to button and triggers function to get selected value.

<html>
<head>
    <title>div background image</title>

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

    <script type="text/javascript" language="javascript"> 
   
       $("document").ready(function(){
       
            $("#button1").click(function(){
        
              $("#div1").append("<span>" + $("#DropDownList").val() + " </span>");
              
            });    
        });
        
    </script>

</head>
<body>
    <div id="div1">
    </div>
    <select id="DropDownList" name="DropDownList">
        <option selected="selected" value="Asp.net">Asp.net</option>
        <option value="C#">C#</option>
        <option value=".Net">.Net</option>
        <option value="JQuery">JQuery</option>
        <option value="JavaScript">JavaScrpt</option>
        <option value="MVC">MVC</option>
        <option value="SilverLight">SilverLight</option>
        <option value="MVP">MVP</option>
        <option value="WCF">WCF</option>
        <option value="MS SQL Server">MS SQL Server</option>
        <option value="BI">BI</option>
        <option value="SSIS">SSIS</option>
        <option value="SSRS">SSRS</option>
        <option value="SSAS">SSAS</option>
        <option value="MVVM">MVVM</option>
        <option></option>
    </select>
    <input type="button" id="button1" value="Get Selected value of dropdown list." ></button>
</body>
</html>

Tags:

Jquery

How to get Jquery selected optionGet Selected Value From Dropdownlist [JQuery]Jquery Gridview Dropdownlist Selected Change Enable Disable ControlsJQuery Hidden Field Set ValueJQuery TextBox Value()JQuery get Value Of TextareaJquery Set Value Of Textbox.Learning JqueryJQuery access label control and set valueJQuery Set Value of Textbox or Label Control In Asp.netJQuery Select Change

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.