jQuery change event with multiple select 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 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

Ads