Dynamic List

Example 1

Dynamically builds a pull down menu, then displays an image based on the selected item.

Code:

<script>
function init(){
	var foods = ["Apple", "Banana", "Pear", "Lemon", "Pickle"];
	
	for(var i = 0; i<foods.length; i++){
		var option = document.createElement("option");
		option.innerHTML = option.value = foods[i];
		document.getElementById("foodChoices").appendChild(option);
		if(i==0){
			option.defaultSelected = true;//set the apple selected by default
		}
	}
	setFood("apple");
	
}
function changeFood(){
	setFood(document.getElementById("foodChoices").value.toLowerCase());
}
function setFood(food){
	document.getElementById("image").src = "pics/" + food + ".jpg";
}
</script>

Output: