Q897 How can I synchronize select form fields so that they all display the same entries when one is changed, but where the synchronized select form fields are not actually selected?

irt.org | Knowledge Base | JavaScript | Form 4 | Q897 [ previous next ]

Q897 How can I synchronize select form fields so that they all display the same entries when one is changed, but where the synchronized select form fields are not actually selected?

You can have three select boxes, where selecting an option in one selects the corresponding ones in another. The synchorization might be possible by selecting and then unselecting the options but might not work on all browsers:

<script language="JavaScript"><!--
function set(i,option,bool) {
    document.myForm.elements['select' + i].options[option].selected = bool;
}

function synchronize(what,number) {
    option = what.elements['select' + number].selectedIndex;
    for (var i = 0; i<3; i++) {
        if (number != i) {
            set(i,option,true);
            eval('setTimeout("set(' + i + ',' + option + ',false)",1)');
        }
    }
}
//--></script>

<form name="myForm">

<select name="select0" onChange="synchronize(this.form,0)">
<option>0
<option>1
<option>2
<option>3
<option>4
<option>5
</select>

<select name="select1" onChange="synchronize(this.form,1)">
<option>0
<option>1
<option>2
<option>3
<option>4
<option>5
</select>

<select name="select2" onChange="synchronize(this.form,2)">
<option>0
<option>1
<option>2
<option>3
<option>4
<option>5
</select>

</form>

Which seems to work on Netscape Navigator 4.5 on Linux.

The addition of the following button highlights the selected/unselected options as having a selectedIndex of -1:

<input type="button" value="Show" onClick="alert(this.form.select0.selectedIndex + ' ' + this.form.select1.selectedIndex + ' ' + this.form.select2.selectedIndex)">

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.