Disable select

[skyline]

I saw this in a recent post by Mike:

function disableSelects()
{
  var i, v, a = document.getElementsByTagName('select');
  for (i = 0; i < a.length; ++i) {
    v = a[i].options[a[i].selectedIndex].value;
    if (v != 'Select') {
      a[i].disabled = true;
    }
  }
}

I'm have 3 select boxes (only these 3 to be affected as others on page need to be unaffected). When one of the selects has a value other than 'none', i want the other 2 selects to be disabled. How would i do this?

[jimfraser]

make a function processed by the onchange event of the three selects in question:

var selectIds = ["select1","select2","select3"]; // the id attribute of the three selects I want to enable/disable

function enableDisableSelect(sel) {
	if (sel.value == "none") {
		// enable all the selects
		for (var i=0; i < selectIds.length; i++) {
			document.getElementById(selectIds[i]).disabled = false;
		}
		
	} else {
		// disable the other 2 selects
		for (var i=0; i < selectIds.length; i++) {
			if (selectIds[i] != sel.id) {
				document.getElementById(selectIds[i]).disabled = true;
			}
		}
		
	}
}

...

<select id="select1" onchange="enableDisableSelect(this);">...</select>
<select id="select2" onchange="enableDisableSelect(this);">...</select>
<select id="select3" onchange="enableDisableSelect(this);">...</select>

[skyline]

Thanks

[MikeFoster]

What an excellent thread!

skyline obviously searched the forums for an answer before posting a question - then found something that almost fit her/his needs. Then Jim topped it off with a perfect conclusion.

I'm gettin all teary-eyed.

I need coffee...