Read, With the Name of Your Lord Who Created

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):

<html>
<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:

Dynamic DropDownList

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…

22 Responses to “Dynamic DropDownList, Just Fill It With Array”

  1. pavan kumar said

    Excellent work…..,

  2. triaslama said

    To Pavan Kumar,

    Thanks, but I think its just a simple work🙂

  3. 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

  4. 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

  5. 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

  6. Sumoy said

    To Badari,

    took the value of 1st DDL in a variable before overwriting.

  7. alex said

    hi, i tried to do this method and worked, but in the 1st dropdown list i choose an option that loads 7 elements in the 2nd dropdown, we are fine till here, if in the 1st one i choose an option that loads 4 in the 2nd, this shows the 4 elements plus 3 from the previous selection.

    how can i “clear” the previous selection?

  8. thx a lotttt my friend !! u helped me.
    i have 1 question, what should a do if i have to make a 3 drop-down-list ?
    any hints ? thx

  9. Jeremy V. said

    Fantastic Sir!!! Worked like a charm

  10. nutan said

    thanks🙂 it helped me a lot .

  11. nutan said

    but i needed three dynamic drop down lists.

  12. Microwave Ovens Under 50$…

    […]Dynamic DropDownList, Just Fill It With Array « Read, With the Name of Your Lord Who Created[…]…

  13. solar energy, wind energy, water energy…

    […]Dynamic DropDownList, Just Fill It With Array « Read, With the Name of Your Lord Who Created[…]…

  14. zero energy…

    […]Dynamic DropDownList, Just Fill It With Array « Read, With the Name of Your Lord Who Created[…]…

  15. agro-info said

    agro-info…

    […]Dynamic DropDownList, Just Fill It With Array « Read, With the Name of Your Lord Who Created[…]…

  16. Mike said

    Couldn’t get it to work. Not sure where to put the for loop in your last step.

    Thanks anyway though…. I’ll keep searching the web for an answer!

  17. Shilpa soni said

    yipeeeee!!!! its working…:)

  18. AZ said

    Where do you put the for loop?? You didnt finish the setup.

  19. Edgars said

    hi,

    How can i do this example, but adding that if I choose for example collect data from my sqlite3 database.
    LIKE
    I choose from categories Cars , then it shows up all cars in my database related to this ?

    Tnx
    p.s sorry for my English😀

  20. Ahaa, its pleasant discussion regarding this piece of
    writing at this place at this webpage, I have read all that,
    so now me also commenting here.

  21. thanks i need it, finally i found what i need !

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: