View Full Version : Dynamic Javascript Form

Matt Boldt
01-12-2012, 05:29 AM

I've used the concept from this website to build a form.

Notice how the second drop down options change depending on what option is selected in the first drop down.

Here's the Javascript

var Option1_Array = new Array("Choose a version", "1", "2");
var Option2_Array = new Array("Choose a version", "3", "4");

function program(objProgram) {
var objVersion = objProgram.form.Version;
var selectedArray = window[objProgram.options[objProgram.selectedIndex].value.replace(/\s/g,'') + "_Array"];
objVersion.options.length = 0;
for (var i=0; i < selectedArray.length; i++) {
objVersion.options[i]=new Option(selectedArray[i], selectedArray[i].replace(/->\s/g, ""));

Here's the HTML


<select name="Program" onChange="program(this)">
<option value="Start">Please choose a program</option>
<option value=Null>---------------------------------------></option>
<option value="Option1">1</option>
<option value="Option2">2</option>


<select name="Version" onChange="">



Now, this code works perfectly, and does exactly what I want it to. BUT I'd like to add more fields that accomplish the same thing.

For example choose option1 --> version 2 --> type 3 --> thing 5

Now, in order to do this I believe you need to generate a 'value = "a_value"' in the generated html option and select fields. That way, all you need to do is make separate functions for each level and the function can call the 'value' html attribute to handle each <select> depending on its declared value.

If this is the best way (it sounds a little sketchy to me) then any help would be great. Or, if you can add on more child selection options within one function.


Philip M
01-12-2012, 08:50 AM
Many examples and free scripts at

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Matt Boldt
01-13-2012, 03:12 AM

Thanks for the resource, but I'm not seeing anything that particularly fits my needs. I have since refined the script and am making progress, but I'm encountering some problems.

Are there any other examples of forms that create options depending on user input?

select a thing - numbers, colors, shapes

select a color - red, green, blue

then generate a list of blues - light blue, dark blue

This is just the simplest explanation I can conjure up...
All the info needs to be submittable via php, which means the <input>'s need to have a value assigned to them to be read by the php script.


Philip M
01-13-2012, 07:46 PM
So what is wrong with

You can readly extend that to four-level if needed.

And/or search this forum for "combo".

Matt Boldt
01-15-2012, 08:12 PM
Sorry, I must not have seen that one. Thank you!

My only question: is it possible to load other elements based on the first select option? Say, <p> tags and other information based on the input?

The options are going to differ in quantity depending on the selection, so it won't always be just the three lists.


Philip M
01-16-2012, 08:49 AM
I am not sure that I understand you, but there is nothing to prevent selecting a particular option loading other script code to hide/show other elements etc.

onchange = "someFunction()"; and then do something (or not) depending on the selectedIndex.

You can have as many or as few options in each select list as you desire.