Get Selected Items From DropDown control using jQuery

Here’s a very simple way to get the selected items in a DropDownList. Just use the jQuery change() method and write the results to a div control

Single Selection

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Get Selected Item - DevCurry.com</title>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
    </script>
     <script type="text/javascript" language="javascript">
         $(function () {
             $('#ddl').change(function () {               
                     $('#divone').text($(this).find(":selected").text());
                 });

             });
         });
    </script>
</head>
<body>
    <select id="ddl">
        <option value="Tomatoes">Tomatoes</option>
        <option value="Potatoes">Potatoes</option>
        <option value="Onion">Onion</option>
        <option value="Olives">Olives</option>
    </select>
    <br />
    <div id="divone" />
</body>
</html>

Multiple Selection

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Get Selected Item - DevCurry.com</title>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
    </script>
     <script type="text/javascript" language="javascript">
         $(function () {
             $('#ddl').change(function () {
                 var sel = "";
                 $(this).find(":selected").each(function () {
                     sel += $(this).text() + " ";
                 });
                 $("#divone").text(sel);
             });
         });
    </script>
</head>
<body>
    <select id="ddl" multiple="multiple">
        <option value="Tomatoes">Tomatoes</option>
        <option value="Potatoes">Potatoes</option>
        <option value="Onion">Onion</option>
        <option value="Olives">Olives</option>
    </select>
    <br />
    <div id="divone" />
</body>
</html>

When the user selects an item from the DropDown by clicking and releasing the mouse button, the change event is fired. We retrieve the text for each selected (using each() and write it in a div.

See a Live Demo

Giving me +1 tells me you liked this article! Thanks in advance

Download the Free DNC Magazine for .NET Developers

Did you like this post?


			Save on Delicious
	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal