Dynamic select options, with a twist

[scrupul0us]

I'm pulling the values for two drop downs from a single sql table based on the ENUM values they can be

so for instance:

dropdown 1:

red
blue
green

dropdown 2:

red_1
red_2
red_3
blue_1
blue_4
blue_36
green_5
green_27
green_100

now, what I'm hoping to accomplish is, when the user picks something from the first drop down, js will remove all the values from the second drop down that don't prefix based on the first

so if the user picks green in the first drop down, the second drop down would only show:

green_5
green_27
green_100

now, im sure some of you (hehe) would say its easier to just ajax out to the db and only grab the records that have that prefix but i'd rather not bust out an entire ajax framework for just one small instance

any help or suggestions would be greatly appreciated.

[Weedpacket]

Well, you can get the dropdown's select element; you can go through its options and remove the ones that don't match .... but I'm guessing you want to be able to put them back if the user makes a different choice from the first dropdown.

So load the page up with all of the options in a Javascript Array. You can populate the second dropdown too, if you like.
While you can add and remove options from a select element ad lib (you'd empty the select completely, and then add the options that match the choice), it might be less obtrusive to construct a whole new select element that looks exactly like the old one but with only the options from the above-mentioned Array that match the user's choice; then remove the old second dropdown and insert your new one in its place (do it in that order so that there aren't any conflicts in the page DOM about which is the "real" select element).

[scrupul0us]

this is what ive been toying with:

<script type="text/javascript" lanaguge="javascript">
function branchChange(c,s)
{
	var evt = document.getElementById(c);
	var selectedIndex = evt.selectedIndex;
	var targetDD = document.getElementById(s);

for(i=targetDD.options.length-1;i>=0;i--)
{
	if(targetDD.value.substr(0,evt.value.length) != evt.value)
	{
	targetDD.remove(i);
	}
}	
}
</script>

but its not going so hot (im not really a good JS coder)

I'm not opposed to your idea of generating the second one the fly based on the values of the first but it sounds pretty rough (at least from my limited JS knowledge)