jQuery

jQuery – Select Box and Change Event

1 Comment

I found a very good article which shows how to manipulate the change event in select box using jQuery.
JETLOGS.ORG – jQuery: Select Boxes and change() events
 

Create the following .html and try it.

<html>                                                                  
	<head>                                                                  
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>          
		<script type="text/javascript"> 
			var message = new Array(); 
			message[1] = "You have selected first item"; 
			message[2] = "You have selected the second item"; 
			message[3] = "You have selected the last item"; 

			$(document).ready(function(){ 
		    	$("#item_select").change(function() 
		    	{ 
					var message_index;

					message_index = $("#item_select").val(); 
					$("#message_display").empty(); 

					if (message_index > 0) {
						$("#message_display").append(message[message_index]); 
					}
				}); 
			}); 
		</script>                                                             
	</head>                                                                 
	<body>                                                                  
		<select id="item_select"> 
		    <option>Select an Item</option> 
		    <option value="1">Item 1</option> 
		    <option value="2">Item 2</option> 
		    <option value="3">Item 3</option> 
		</select>
		<div id="message_display"></div>
	</body>                                                                 
</html>

 

Done =)

Reference: JETLOGS.ORG – jQuery: Select Boxes and change() events

One thought on “jQuery – Select Box and Change Event”

  1. Pingback: jQuery – Check if an option is selected in Select Box | Eureka!

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.