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
Tweet
About The Author
2 comments:
I am very thankful to your code, thanq so much, ..prapoorna
thanks. it's useful. :)
Post a Comment