471,350 Members | 1,586 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,350 software developers and data experts.

Javascript --- synchronizing two select lists

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!
Jul 23 '05 #1
2 2793
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
Jul 23 '05 #2
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
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Keith Veleba | last post: by
2 posts views Thread by Christopher D. Wiederspan | last post: by
26 posts views Thread by wardy | last post: by
24 posts views Thread by firstcustomer | last post: by
27 posts views Thread by Chris | last post: by
2 posts views Thread by sorobor | last post: by
2 posts views Thread by smartic | last post: by
reply views Thread by XIAOLAOHU | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.