How can I grey out a drop down box?? 1

WestSide2003 · Mar 31, 2004

Hi,

We have two drop down boxes in a form we are using. I want to basically grey out one of the drop down boxes if a user chooses the other.

We basically do not want a user to be able to select an option from each drop-down box at the same time. If the user chooses an option from drop-down box "A", then drop-down box "B" should be greyed out and vice versa...

Can anyone shed some light, this might be more geared to JavaScript?? I don't know JavaScript, so if there is a CF (server side) way, can someone let me know, or is this best handled with JavaScript?

Thanks

WestSide

jemminger · Mar 31, 2004

like so:

Code:

<script type="text/javascript">
function doDisable(o1, o2) {
	if (o1.selectedIndex > 0) {
		o2.selectedIndex = 0;
	}
	o2.disabled = o1.selectedIndex > 0;
}
</script>

<form>
	<select name="sel1" onchange="doDisable(this, this.form.sel2);">
	<option>choose:</option>
	<option>a</option>
	<option>b</option>
	</select>

	<select name="sel2" onchange="doDisable(this, this.form.sel1);">
	<option>choose:</option>
	<option>c</option>
	<option>d</option>
	</select>
</form>

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

WestSide2003 · Mar 31, 2004

Hi,

This works, thanks for that.

However, is there a way to have box "b" lets say.. be activated if the user clicks and then box "a" be greyed out..

As of now, it works good, but I want to allow the user a way to activate box "b" by clicking it, as of now its greyed when you activate box "a",

if the user clicks the greyed box, I want to activate it, but then deactivate box "b"

BillyRayPreachersSon · Mar 31, 2004

Wow... look at those goalposts run! I've never seen them move so fast!

;o)

WestSide2003 · Mar 31, 2004

What is that supposed to mean?

vongrunt · Apr 1, 2004

Conceptual problem here: deactivated select box (disabled=true) stops receiving any user input (kbd, mouse).

jemminger · Apr 1, 2004

vongrunt is correct, and as a user i would not expect a disabled element to become enabled by clicking on it. the first way is more logical to me.

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

WestSide2003 · Apr 1, 2004

Ok..

Thanks.. I appreciate the help.

Westside

kaht · Apr 2, 2004

Just a thought:

If you can only have one item selected in the 2 dropdowns at one time, is it possible for you to structure it by putting all the values in one dropdown? Dunno if that might interrupt the logical flow of your page or not.

If that's not the case you might wanna consider leading the dropdowns with a radio button. That way the user can undo one of the options that they have selected and select a value from the other dropdown instead. Something similar to this:

Code:

<html>
<head>
<title>Blah</title>
<script language=JavaScript>
function radioFunction() {
   if (blahForm.blahRadio[0].checked) {
      blahForm.blahSelect1.disabled = false;
      blahForm.blahSelect2.disabled = true;
   }
   else {
      blahForm.blahSelect1.disabled = true;
      blahForm.blahSelect2.disabled = false;
   }
}
</script>
</head>
<body>
<form name=blahForm>
<input type=radio name=blahRadio onclick='radioFunction()' checked>
<select name=blahSelect1>
<option value=1>1
<option value=2>2
</select>
<br>
<input type=radio name=blahRadio onclick='radioFunction()'>
<select name=blahSelect2 disabled>
<option value=3>3
<option value=4>4
</select>
</form>
</body>
</html>

-kaht

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!

How can I grey out a drop down box?? 1

WestSide2003

Technical User

jemminger

Programmer

WestSide2003

Technical User

BillyRayPreachersSon

Programmer

WestSide2003

Technical User

vongrunt

Programmer

jemminger

Programmer

WestSide2003

Technical User

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor