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…
pavan kumar said
Excellent work…..,
triaslama said
To Pavan Kumar,
Thanks, but I think its just a simple work
badari said
hi,
In my project i am having two dynamic dropdownlist control
one dropdownlist value is overwritten by another dropdownlist value
i want first dropdown list value
how to i get the first dropdown list value
Regards,
Badari
Madmax said
Works fine.. but when i view the sources it does not show the values and name of the dropdown list.. i have a project that needs to access the value and name of the dropdown list
Mihir said
Hi,
I was stuck with similar type of issue with ajax response list and html select. your article helped a lot in understanding the basics.. keep up the good work. thanks
Sumoy said
To Badari,
took the value of 1st DDL in a variable before overwriting.