Selectbox onchange disable other selectbox 1

upplepop · May 12, 2006

I have two select boxes, but I only want the user to be able to select only one of them. Both boxes are dynamic, and populate data from recordsets.

Both boxes should be initially enabled. Once the user make a selection in one of the boxes, the other should become disabled. If the user changes his mind and wants to select the other box, he should be able to select the first option (Option 0) in the box to re-enable the other box.

Here are some sample boxes to help get you started.

Code:

<html>
<head>
</head>
<body>
<form name="frmFilter">
  <select name="lstCounty" id="lstCounty" onChange="">
	   <option selected value="0">By County...</option>
       <option value="1">Other option 1</option>
	   <option value="2">Other option 2</option>
  </select>
  <select name="lstCity" id="lstCity" onChange="">
	   <option selected value="0">By City...</option>
	   <option value="1">Other option 1</option>
	   <option value="2">Other option 2</option>
  </select>
</form>
</body>
</html>

Thanks in advance for your help!

theniteowl · May 12, 2006

Code:

function chgSelect(which) {
  if (which == 'County') {
    if (document.getElementById('lstCounty').selectedIndex == 0) //Unlock lstCity
      document.getElementById('lstCity').disabled = false;
    else // lock city
      document.getElementById('lstCity').disabled = true;
  }
  else {
    if (document.getElementById('lstCity').selectedIndex == 0) //Unlock lstCounty
      document.getElementById('lstCounty').disabled = false;
    else // lock lstCounty
      document.getElementById('lstCounty').disabled = true;
  }
}


<form name="frmFilter">
  <select name="lstCounty" id="lstCounty" onChange="[COLOR=red]chgSelect('County');[/color]">
       <option selected value="0">By County...</option>
       <option value="1">Other option 1</option>
       <option value="2">Other option 2</option>
  </select>
  <select name="lstCity" id="lstCity" onChange="[COLOR=red]chgSelect('City');[/color]">
       <option selected value="0">By City...</option>
       <option value="1">Other option 1</option>
       <option value="2">Other option 2</option>
  </select>
</form>

It's hard to think outside the box when I'm trapped in a cubicle.

upplepop · May 12, 2006

theniteowl,
works wonderfully. Thanks a lot!

theniteowl · May 12, 2006

You'r welcome.
It could probably be done in a more compact bit of code but I figured easy to understand and quick was better than waiting for a difficult to read function.

It's hard to think outside the box when I'm trapped in a cubicle.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Selectbox onchange disable other selectbox 1

upplepop

IS-IT--Management

theniteowl

Programmer

upplepop

IS-IT--Management

theniteowl

Programmer

Similar threads

Part and Inventory Search

Sponsor