Javascript --- synchronizing two select lists

[Weston C]

I'm trying to keep the selected / displayed option of two different
select lists synchronized -- so when the user selects, say, the third
option on one of them, the third option on the other is displayed:

http://www.managerassistant.com/newpurchase.html

Here's the code I'm trying -- but that doesn't seem to work:

function synchronizeSelects(thisSelect,otherSelect)
{
// find the selected option in thisSelect
i = 0;
while(i < thisSelect.options.length &&
!(thisSelect.options[i].selected))
i++;

// if there is one, and it's not greater in # than
// the number of options in the otherSelect
if( (i != thisSelect.options.length)
&& (i < otherSelect.options.length) )
{
//then search the otherSelect for a selction
//and turn it off
for(j = 0; j < otherSelect.options.length; j++)
{
otherSelect.options[j].select = false;
otherSelect.options[i].defaultSelected = false;
}
//and then select i
otherSelect.options[i].select = true;
otherSelect.options[i].defaultSelected = true;
}
}

It's called from an onchange even on both selects. For example:
<select name="product" id="prod" class="smallselects"
onchange="synchronizeSelects(this,document.getElem entById('supp'))">

Any ideas what I may be doing wrong here?

Thanks,

Weston

~==~
http://weston.canncentral.org/
Taking Pictures During Dreams
weston8[at]cann8central.org
(remove eights to email me)

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[Mick White]

Weston C wrote:

I'm trying to keep the selected / displayed option of two different
select lists synchronized -- so when the user selects, say, the third
option on one of them, the third option on the other is displayed:

http://www.managerassistant.com/newpurchase.html

Here's the code I'm trying -- but that doesn't seem to work:

function synchronizeSelects(thisSelect,otherSelect)
{
// find the selected option in thisSelect

....
function synchronizeSelects(thisSelect,otherSelect){
otherSelect.selectedIndex= thisSelect.selectedIndex;
}

<select name="product" id="prod" class="smallselects"
onchange="synchronizeSelects(this,this.form.supp)" >

<select name="supp" id="supp" class="smallselects"
onchange="synchronizeSelects(this,this.form.produc t)">

Mick

[asmo]

Try this:

<script type="text/javascript">
function syncSelect( first, second ) {
var first = (typeof first == "string") ? document.getElementById(
first ) : first;
var second = (typeof second == "string") ? document.getElementById(
second ) : second;
second.selectedIndex = first.selectedIndex;
}
</script>

<select id="one" onchange="syncSelect(this, 'two')">
<option>one</option>
<option>two</option>
<option>three</option>
</select>

<select id="two" onchange="syncSelect(this, 'one')">
<option>one</option>
<option>two</option>
<option>three</option>
</select>

should work..

Regards
Jan