This bit of HTML and Javascript works in IE6, FF2 and FF3. I can't find any reason why it shouldn't work in IE7 also, but this.selectedIndex always returns 0.

** in javascript file
function onTypeChange()
{
    alert($('type_id').selectedIndex);
    if ($('type_id').selectedIndex != 0) 
    { 
        Element.update('chosenType', this.options[this.selectedIndex].text);     
        Form.Element.enable('go_button'); 
    } else {
        Element.update('chosenType', 'Selected Type'); 
        Form.Element.disable('go_button');
    }
}

** in html
<select class="hosp_select_buttons selectbox" id="type_id" name="type[id]" 
        onchange="onTypeChange();">
<option value="">Please select</option>
<option value="1594">Ambulatory Surgical Center</option>
<option value="1595">Birthing Center</option>
<option value="1596">Comprehensive Outpatient Rehabilitation Facilities</option>
<option value="1597">Drug Abuse Treatment Program</option>
<option value="1598">Mammography</option>
<option value="1599">Narcotic Treatment Program</option>
<option value="1600">Outpatient Physical Therapy</option>
<option value="1601">Private Home Care Provider</option></select>

** Edited to change the stylistic things people objected so strongly too. The alert still says the selectedIndex is 0 after I change the select box. This code has, and still does work in all browsers other than I.E. 7

This bit of HTML and Javascript works in IE6, FF2 and FF3. I can't find any reason why it shouldn't work in IE7 also, but this.selectedIndex always returns 0.

** in javascript file
function onTypeChange()
{
    alert($('type_id').selectedIndex);
    if ($('type_id').selectedIndex != 0) 
    { 
        Element.update('chosenType', this.options[this.selectedIndex].text);     
        Form.Element.enable('go_button'); 
    } else {
        Element.update('chosenType', 'Selected Type'); 
        Form.Element.disable('go_button');
    }
}

** in html
<select class="hosp_select_buttons selectbox" id="type_id" name="type[id]" 
        onchange="onTypeChange();">
<option value="">Please select</option>
<option value="1594">Ambulatory Surgical Center</option>
<option value="1595">Birthing Center</option>
<option value="1596">Comprehensive Outpatient Rehabilitation Facilities</option>
<option value="1597">Drug Abuse Treatment Program</option>
<option value="1598">Mammography</option>
<option value="1599">Narcotic Treatment Program</option>
<option value="1600">Outpatient Physical Therapy</option>
<option value="1601">Private Home Care Provider</option></select>

** Edited to change the stylistic things people objected so strongly too. The alert still says the selectedIndex is 0 after I change the select box. This code has, and still does work in all browsers other than I.E. 7

• javascript
• html
• internet-explorer-7

• Does any of the that JS work? I've never seen that much JS put into an onchange. Usually it's attached otherwise or put into a function. – Darryl Hein Commented Apr 29, 2009 at 18:48
• Remind you of thedailywtf./Articles/OnClick-Does-What!.aspx ? – Greg Commented Apr 29, 2009 at 18:53
• because 2 lines of javascript == 30 lines of form validation code? – Kyle Boon Commented Apr 29, 2009 at 20:13

2 Answers 2

You're trying to get selectedIndex from the option list.

Use this.selectedIndex instead of this.options.selectedIndex.

Also see this example for cleaner usage: http://www.mredkj./tutorials/tutorial002.html

I know this is old, but I can't help seeing it here unaswered. I think the problem here is that you're using $('type_id'), which returns an Element in jquery (I believe). To access the actual HTML element you have to use $('type_id')[0] or something like that. I think if you use document.getElementById('type_id') it should work.

Edit: Changed answer to reflect Benxamin's ment about how to access the dom element $('type_id')[0]