Changing a second select box when another changes

Forum Moderators: open

Message Too Old, No Replies

Changing a second select box when another changes

how to?

Clark

9:03 pm on Aug 8, 2005 (gmt 0)

I have two select boxes.

1. Guns
2. Butter

Contents of Guns:
Value="1" Name="red widgets"
Value="2" Name="blue widgets"
Value="3" Name="green widgets"

Contents of Butter;
Value="1" Name="green ham"
Value="2" Name="blue turkey"
Value="3" Name="red chicken"

Is there a way to make the second option in butter, "blue turkey", disappear when someone selects "blue widgets" from gun drop down?
(As everyone knows, blue widgets doesn't go with blue turkey :) )

If so, what happens if someone selects "blue turkey" first, then later chooses "blue widgets"...will it handle that properly.

Rambo Tribble

2:21 am on Aug 9, 2005 (gmt 0)

If your option lists maintain a straight one-to-one relationship it should be pretty easy. Onchange can initiate an update of the corresponding value in the alternate select list. It will probably require using node removal methods.

I'm glad you warned me about blue turkey vis-a-vis blue widgets. I could have made a catastrophic faux pas.

Clark

6:07 am on Aug 9, 2005 (gmt 0)

Haha.

OK, I only wish I understood what you were saying. I really don't know javascript and wish I didn't have to learn. Do you think maybe my best bet is to go to one of those javascript code libraries and just swipe the code? Are those sites any good?

Rambo Tribble

12:56 pm on Aug 9, 2005 (gmt 0)

If no one has beaten me to it, I'll try to hack a quick example this evening. Don't worry, it's really pretty simple.

Clark

3:22 pm on Aug 9, 2005 (gmt 0)

Much obliged!

Rambo Tribble

2:49 am on Aug 10, 2005 (gmt 0)

Try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
</style>
<script type="text/javascript">
function syncSels(orig,targ_sel){
 var sels=document.getElementsByTagName('select'); // places all selects in sels[] array
 var indx=orig.selectedIndex; // gets index of the selected option in the initiating select
 if(sels[targ_sel].childNodes[0].nodeType!=1) indx=indx+1; // adjust for browsers that insert a comment node
 sels[targ_sel].removeChild(sels[targ_sel].childNodes[indx]); // remove target
}
</script>
</head>
<body>
<form action="">
<p>
<select onchange="syncSels(this,1);"> <!-- passes this select and the target select's sels[] index number -->
<option value="1">Remington</option>
<option value="2">Winchester</option>
<option value="3">Colt</option>
</select>
</p>
<p>
<select onchange="syncSels(this,0);">
<option value="1">Land O Lakes</option>
<option value="2">Tillamook</option>
<option value="3">Lucerne</option>
</select>
</p>
</form>
</body>
</html>

Note: I've only tested this on Linux, with Firefox and Konqueror.

Clark

3:31 am on Aug 10, 2005 (gmt 0)

Thanks, trying to get it to work. Would it be really hard to change it so that selecting one option in the select box would enable a text box?

Rambo Tribble

5:13 am on Aug 10, 2005 (gmt 0)

The option element supports the onclick event, so it shouldn't require any great effort to manipulate a text box in response to a particular option being chosen.

Rambo Tribble

2:36 pm on Aug 10, 2005 (gmt 0)

Here's a slightly improved (simplified) version of the first script:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
</style>
<script type="text/javascript">
function syncSels(orig,targ_sel){
 var sels=document.getElementsByTagName('select'); // places all selects in sels[] array
 var indx=orig.selectedIndex; // gets index of the selected option in the initiating select
 sels[targ_sel].options[indx].parentNode.removeChild(sels[targ_sel].options[indx]);
}
</script>
</head>
<body>
<form action="">
<p>
<select onchange="syncSels(this,1);"> <!-- passes this select and the target select's sels[] index number -->
<option value="0">Remington</option>
<option value="1">Winchester</option>
<option value="2">Colt</option>
</select>
</p>
<p>
<select onchange="syncSels(this,0);">
<option value="0">Land O Lakes</option>
<option value="1">Tillamook</option>
<option value="2">Lucerne</option>
</select>
</p>
</form>
</body>
</html>

Rambo Tribble

3:43 pm on Aug 10, 2005 (gmt 0)

Note that once this script has run, the indexes no longer correspond between selects. If it is necessary to accommodate multiple invocations of the script on the same selects, a more complex mapping of option elements to one another will be necessary.