Why does this.selectedIndex not work on IE7 for a <select> tag?

Question

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

Answer 1

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.com/tutorials/tutorial002.html

Answer 2

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