Dynamic DropDownList, Just Fill It With Array
Posted by triaslama on April 1, 2008
How to change the content of dropdownlist (combo box) dynamically? want the value of a dropdownlist changes when we change the selected item of another dropdownlist? Is there exist a simple solution for this? Get ready, because the answer is yes!
What we need to create a dynamic dropdownlist in client side is just a little knowledge of HTML and Javascript, two dropdownlist (combo box) element, and an array variable, no more! Well, because I want this will become a very simple solution eventhough the more complex and better solutions exists somewhere out there.
I will show you the HTML code, this code consist of two dropdownlist / combo box (two <select> element) with the second <select> element disabled and will be enabled if we choose something from the first <select> element. Here the HTML code (dnmddl.htm):
<head>
<title>Dynamic DropDownList, A Simple Solution</title>
<script lang=”javascript” type=”text/javascript” src=”dynamicddl.js”>
</script>
</head>
<body>
<select id=”slc_source” onchange=”srcChange(this.value)”>
<option value=”">—-</option>
<option value=”Asian”>Asian</option>
<option value=”Europe”>Europe</option>
<option value=”African”>African</option>
</select><select id=”slc_target” disabled=”true”>
</select>
</body>
</html>
Don’t be afraid, eventhough the Javascript code look a bit large but what is done by this code only initialize the array with specified value and fill it to the second dropdownlist element (slc_target). This is the Javascript code (dynamicddl.js):
var arr;
var option;
function srcChange(val)
{
var slc_target = document.getElementById(”slc_target”);
switch (val)
{
case “Asian”:
arr = new Array(”Indonesia”,”India”,”Malaysia”,”Japan”,”Pakistan”,”UEA”);
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}
break;
case “African”:
arr = new Array(”Egypt”,”Marocco”,”Senegal”,”Tunisia”,”Sudan”);
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}
break;
case “Europe”:
arr = new Array(”England”,”France”,”Germany”,”Italy”,”Spain”,”Swiss”);
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}
break;
default:
slc_target.disabled = false;
slc_target.options.length = 0;
break;
}
}
HTML code without the Javascript code will only become a static page, so HTML file above (dnmddl.htm) refers to a Javascript file named dynamicddl.js to make a dynamic dropdownlist.Dnmddl.htm has two <select> element contained within it (slc_source & slc_target). One thing that you must aware in slc_source is onchange attribute. This attribute receives srcChange(param) function as an event handler. Change event will be executed in every selected value changes in slc_source, so srcChange(param) will be called in every changes of slc_source value.
What is done by srcChange is receives a parameter, evaluates that parameter, and fills slc_target according to that parameter. We create an option will be used to fill slc_target with the following sample of code:
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}
First parameter of Option object will be the text of dropdownlist and second parameter will be the value. The rest of code should works as is, and if we run our code and select a value from first dropdownlist we should get the same result as this screenshots:
Try to change the value of first dropdownlist (slc_source) and you will get the second dropdownlist (slc_target) populated with different values. See you…
April 17, 2008 at 11:45 am
Excellent work…..,
April 17, 2008 at 9:14 pm
To Pavan Kumar,
Thanks, but I think its just a simple work