jQuery change event with multiple select option
In this tutorial , we will discuss about 'change' event of jQuery with multiple select list & it also display the selected option.
In this tutorial , we will discuss about 'change' event of jQuery with multiple select list & it also display the selected option.
jQuery change event with multiple select option
In this tutorial , we will discuss about 'change' event of jQuery with
multiple select list & it also display the selected option. In the below example
a multiple select list is given, when we select any option/options a change
event is triggered . This changed selected list is displayed by this event.
formChangeMultipleList.html
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<select name="cloths" multiple="multiple">
<option>Shirt</option>
<option selected="selected">T-Shirt</option>
<option>Jeans</option>
<option selected="selected">Trousers</option>
<option>Skirts</option>
<option>Coats</option>
</select>
<div></div>
You can select multiple option by pressing "ctrl" key.
<br>Can deselect the option by clicking on it.
<script>
$("select").change(function () {
var str = "YOU SELECTED :";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
</script>
</body>
</html>
|
OUTPUT
Before any selection :
After clicking "T-shirt" and "Skirt"(by holding ctrl key) :
Download Source
Code
Click
here to see demo