9 Javascripts You Better Not Miss!

By Kiran Pai
2005-06-11

Example 9 : Filling the values of a dropdown SelectMenu depending on the selection in another Menu

If you are developing a professional site for a company you would invariably come across a situation where you are expected to do the above. Remember that the power of this script becomes evident when you use Javascript along with some other dynamic language such as JSP or ASP. You could probably fill the arrays used in this script with some data fetched from a database relating to the particular user. When he selects an entry in the first dropdown menu, he is immediately presented with his relevant data in the second menu, instead of making another request to the server to fetch more data. These types of scripts are very useful when you have to allow a user select some thing from a general level to a more specific level. I mean each successive dropdown menu would be more and more specific choice. Read on to understand the entire thing.

<SCRIPT LANGUAGE = "JavaScript"> <!-- var tennisplayers= new Array("Safin", "Andre Agassi", "Pete Sampras", "Anna Kournikova", "Martina Hingis"); var cricketplayers = new Array("Sachin Tendulkar", "Steve Waugh", "Brian Lara", "Sir Don Bradman"); function set_player() {
	var select_sport = document.myform.sport; var select_player = document.myform.player; var selected_sport = select_sport.options[select_sport.selectedIndex].value; select_player.options.length=0; if (selected_sport == "tennis"){
		for(var i=0; i<tennisplayers.length; i++)
			select_player.options[select_player.options.length] = new Option(tennisplayers[i]);
	} if (selected_sport == "cricket"){
		for(var i=0; i<cricketplayers.length; i++)
			select_player.options[select_player.options.length] = new Option(cricketplayers[i]);
	}
} --> </SCRIPT> <BODY> <FORM NAME="myform" METHOD="POST"> Sport <SELECT NAME="sport" onChange="set_player()"> <OPTION VALUE="tennis">------- <OPTION VALUE="tennis">Tennis <OPTION VALUE="cricket">Cricket </SELECT> Player <SELECT NAME="player"> <OPTION>------ </SELECT> </FORM> </BODY>

In the above script when the user selects either Cricket or Tennis in the first Select Menu, the choices in the second Select Menu automatically changes accordingly.

Try to understand the working of all these scripts properly rather than cut-pasting them. A reference book on Javascript is extremely useful since there are many small details that you got to take note of while scripting else your scripts won't run. Programming in Javascript in conjunction with any other language such as ASP or JSP makes it more tough and you have to take great care about the syntax else you end up in a mess. Thats all..

Hope you enjoyed these 9 examples.

Tutorial Pages:
» 9 Javascripts you better not miss!
» Example 1 : A Single click for checking-unchecking multiple check boxes
» Example 2 : Opening a page (existing as well as dynamic) in a new window without bars, buttons, etc.
» Example 3 : Multiple submit buttons on a single form (Submitting same form to any one of many programs)
» Example 4 : Emulating Browsers Back-Forward buttons
» Example 5 : Making the Output of a program (servlet/cgi program) to appear in a new frame
» Example 6 : Displaying a Countdown using Javascript
» Example 7 : Changing images with MouseOver and MouseOut events
» Example 8 : Checking the form contents before submitting the form
» Example 9 : Filling the values of a dropdown SelectMenu depending on the selection in another Menu

Related Tutorials:
» JavaScript Debugging Techniques with Firebug
» Striped Tables Using JavaScript
» Opening PDFs in a New Window with JavaScript
» Essential Javascript -- A Javascript Tutorial
» Submit Forms Conditionally using JavaScript
» How to Setup a Randomising Function