Populating <select> lists

How?

[one_mind]

Hi,
I want to have two drop-down lists. When I change the first drop-down list (the "category"), I want to populate the second drop-down list with "sub-categories", which are obviously dependent on the main category. "I know", I thought, "I'll use a <select> within a <form> and then link OnChange to some piece of PHP or JavaScript". Not so easy!

I suck with javascript and really just need some code that will post the category id back to the same script.

Heres some of my code:

<script type="text/javascript">
function sub()
{
need code here that sends category selection through POST back to same script.
}

</script>

<select name="category" onchange="sub()">

Any help with this would be great.

Thanks

[jatar_k]

2 options come to mind, depending on the size of the lists one may be foolish

use php to load the sub-cats into arrays in js and then jsut populate the second drop down by getting the selectedIndex value from the cat drop down and pushing the proper array into the sub cat drop down.

the other is to use your function to submit the form. If the action of the script is not self then you would have to use js to swap the action of the form and then submit it.

I don't know the code off the top of my head but a good DOM reference will help you find the proper form elements and methods.

[one_mind]

I just need the javascript function that will post one variable back to same script.

[RussellC]

Here is what I do:

function showDropDownBox(ddbox) {
if ( ddbox.options[ddbox.selectedIndex].value == "Option1" ) {
document.getElementById("option1").style.display = "inline";
} else {
document.getElementById("option1").style.display = "none";
}


if ( ddbox.options[ddbox.selectedIndex].value == "Option1" ) {
document.getElementById("spacer").style.display = "none";
} else {
document.getElementById("spacer").style.display = "inline";
}

</script>

Then the select field:

<select name="name" onchange="showDropDownBox(this)">
<option value="Option0" selected="selected">Option 0</option>
<option value="Option1">Option 1</option>
</select>

Then make 2 <div>'s that are the same height, 1 hidden and one inline. Now, When Option 1 is selected the div: <div id="option1" style="display: none;"> will show and the div: <div id="option1" style="display: inline;"> will hide and vice versa.

The reason for the 2 divs is so that the form height dosnt move up and down, you dont have to do it that way but i think it looks better.

Does that make sense?

[dmmh]

the formal term for this is 'chained selects' and will returns lots of hits @ google

this one ownes (I use it myself):

[yxscripts.com...]

hope this is ok, otherwise stripe the url like you mostly do moderators :)

[one_mind]

Thanks guys,

I needed to know what this was called so i could find it in google :)

Thanks again