Need help about two dropdown boxes....

[werewood]

Hi All,

I need some help about two dropdown boxes behavior:

dropdown box #1: options 0, 1, 2, 3
dropdown box #2: options 0,1,2,3,4,5

When the form loads, dropdown box #2 is disabled/greyed out by default.
When a user chose option 3 in dropdown box #1, dropdown box #2 would be enabled/un-greyed out.

I tried something like but not working:

<select name="cbo1" onchange="if (document.form1.cbo1.options[document.form1.cbo1.selectedIndex].value==3) document.form1.cbo2.enabled)>
........
<select name="cbo2" disabled>
........

Any help would be appreciated! Thanks in advance!

Werewood aka Hellywood2004

[mwinter]

<select name="cbo1" onchange="if (document.form1.cbo1.options[document.form1.cbo1.selectedIndex].value==3) document.form1.cbo2.enabled)>

There are a couple of errors and problems with that code.

1. You have an unmatched closing parenthesis, and you haven't included a closing quote for the onchange attribute value.
2. The value property is a string, so you should probably comparing to a string. There are times when using implicit type conversion is appropriate, but this probably isn't one of them.
3. Your references to the two select elements are really very inefficient.
4. There is no enabled property. There is, however, a disabled property.
5. This code should really be placed in a function, particularly as it needs to be a little more complicated. Only the simplest of code should be placed directly in intrinsic event listeners.

A better implementation of what you've shown would be:

<select name="cbo1"
 onchange="if('3' == this.options[this.selectedIndex].value) {this.form.elements.cbo2.disabled = false;}">

or slightly more simply:

<select name="cbo1"
 onchange="if('3' == this.value) {this.form.elements.cbo2.disabled = false;}">

However, you'll also probably want to cope with the possibility of changing the value to another option, which I assume will require the second select element to be disabled once again:

function myFunction(element) {
  element.form.elements.cbo2.disabled = ('3' != element.value);
}

<select name="cbo1" onchange="myFunction(this);">

The identifiers used in the snippets above are bad choices, but as I don't know what you're doing (nor why you're doing it), I can't suggest anything better. You should use your own judgement.

<select name="cbo2" disabled>

Disabling a form control in HTML is a bad idea unless you can guarantee successful script execution; possible in a private environment like an intranet, but impossible on the Web. It is better to disable the form control through a script so that if execution fails, the form control will still be usable.

Hope that helps,
Mike