Dynamic Second Drop Down Box

Any advice?

[johnnydequino]

I tried to search on google and on webmasterworld and could not find the correct topic.

What javascript is required for this:

A html page has two drop down boxes - the first one with categories, the next drop down with several widgets in a category. How can I make the second drop down box event based based on the first drop down box?

As in, if someone selects red widgets, I only want to display the 5 red widgets in it's category, not the entire 50 widges that are now in the second drop down box.

Hope I am making sense =)

Thanks for any help that you can give me -

jd

[caila]

johnny -

i found this script today at [javascriptkit.com...] hope that helps you some.

i am now trying to figure out how to get it to load documents into an iframe instead of redirecting to a URL in the same window. i am a cut-and-paste javascripter and can't find where to put the target :(

--caila

[Birdman]

Johnny,

Here's a quick example for you.

HTML:

<select name="main" onchange="reload(this.value)">
<option value="Red Widgets">Red Widgets</option>
<option value="Blue Widgets">Blue Widgets</option>
<option value="Green Widgets">Green Widgets</option>
</select>

<select name="sub"></select>

JavaScript:

<script type="text/javascript">
Red = new Array("Red #1","Red #2","Red #3");
Blue = new Array("Blue #1","Blue #2","Blue #3");
Green = new Array("Green #1","Green #2","Green #3");

function reload(val){
if(el == "Red Widgets") loadEm(Red,length(Red));
if(el == "Blue Widgets") loadEm(Blue,length(Blue));
if(el == "Green Widgets") loadEm(Green,length(Green));
}
function loadEm(arr,len){
var options;
for (i=0; i<len; i++){
options += "<option value='"+arr[i]+"'>"+arr[i]+"</option>\n";
}
document.forms[0].elements["sub"].innerHTML = options;
return;
}
</script>

Check it out and see if it helps. I didn't test it ;)

Birdman