Dynamic JavaScript population

Today I’ve been fiddling with adding options to a drop down list box dynamically using JavaScript (client side). Because this uses JS, it can also be conditional in terms of the options passed to the list (similar to using PHP on the server side to generate the options for the drop down list box dynamically).

The main function creates a new ‘option’ object and assigns values and text part of the option. This is the engine of that below:

function addOption(selectbox, text, value) {
	var optn = document.createElement("option");
	optn.text = text;
	optn.value = value;
	selectbox.options.add(optn);
}

Note that each time the function is called, it adds a new option to the list box. So we can add one option by calling the function once. Like this:

addOption(document.drop_list.week_list,"Monday", "Monday");

This way we can create a drop down list box of all the days of the week by calling the function each time for each day of the week. With this now you can easily create the list box. Efficiency then dictates that we should add another step to this by using one array of days of the week. So from the array of days we will loop through and add each day to the list box. Here’s the array set-up:

var days = new Array("Monday", "Tuesday", "Wednesday", "Thursday",
                               "Friday", "Saturday", "Sunday");

Now our array is ready with data, we will loop through the array by using for loop and then call the addOption function using the data of the array:

for (var i=0; i < days.length;++i) {
	addOption(document.drop_list.week_list, days[i], days[i]);
}

You can see with this array we will able to populate the drop down list box of days. Here is the simple code for html body tag and the form with drop down list:

<html>
<head>
<title>Dynamic List Population Example
<script>
function addOption(selectbox, text, value) {
	var optn = document.createElement("option");
	optn.text = text;
	optn.value = value;
	selectbox.options.add(optn);
}
function addOption_list() {
	var days = new Array("Monday", "Tuesday", "Wednesday", "Thursday",
                                       "Friday", "Saturday", "Sunday");
	for (var i=0; i < days.length;++i) {
		addOption(document.drop_list.week_list, days[i], days[i]);
	}
}
</script>
</head>
<body onLoad="addOption_list()"> 
<form name="drop_list" action="yourpage.php" method="POST" >
<select name="week_list">
<option value="" >Week list</option>
</select>
</form>
</body>
</html>
Advertisements

About Cameron
I'm a final year Computer Science/Information Systems major. Already finished my BA in Politics/Philosophy. I do web and software freelance on the side, while I finish studying. Hoping to be self-employed by the end of my degree, otherwise off into the real-world I go....

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: