showing/hiding a div based on option's classname

Hey everybody,

I'm still fairly new to javascript, and I can't seem to get this script I'm working on running correctly. What I want to do is show or hide a div based on the previous sibling's css class. Basically this is to show and hide fields for supplying more information in a form. Here's what I have so far. Any help at all would be greatly appreciated.

markup:

HTML Code:

---

<ul id="ulQuestion">
        <li>
                <label for="cboQuestion" id="lblQuestion">This is the question</label>
                <select id="cboQuestion" class="other">
                        <option selected="selected">Choose</option>
                        <option value="1">Yes</option>
                        <option value="2">No</option>
                        <option value="99" class="otherText">Other</option>
                </select>
                <div id="pnlOther" class="nodisplay">
                        <ul id="ulOther">
                                <li>
                                        this is the other box
                                </li>
                        </ul>
                </div>
        </li>
</ul>

---

Code:

---

function showOtherCbo(control, panel) {
        var hideClass = 'nodisplay';
        var showClass = 'display';
        for(var i = 0; i < control.childNodes.length; i++) {
                var opts = control.childNodes[i];
                if(opts.className == 'otherText') {
                        while(panel.nodeType != 1) {
                                panel = panel.nextSibling;
                        }
                        panel.className = showClass;
                }
        }
}

---

I'm using unobtrusive javascript to attach the showOther function to the select's onchange attribute, passing "this" and "this.nextSibling".

Thanks in advance.

So what's your question?

How are you attaching that function to an event?

Unobtrusive JavaScript is good but I am concerned that your code may not be following other JavaScript Best Practices I recommend you read up on them.

I am aware this script does go against some Javascript Best Practices, but for this particular project (most of which is out of my control) the entire site relies on javascript being available, or it won't function.

The function is attached to the onchange event by looping through all select elements and uses setAttribute to add the event to selects with a class of "other".

Using setAttribute to attach an event handler won't work in IE.

You didn't say but it looks like you want to check the selected property of the option with its class set to 'otherText' to know whether to show the other element of do nothing.

Oops, I guess I did leave that out. That is what I'm trying to do. I just got around to testing in IE last night and I realized that it's not working. Like I said, I'm still fairly new to javascript.