Question

I have an asp:listbox which I populate from a database. I am however trying to retrieve the option id when I hover over it with the mouse. What I would normally do is attach a mouseover event but apparently in IE options don’t recognize mouseover events! So is there a way I can get which option I am currently over?

<select size="4" name="lstbox_AdvCat" id="lstbox_AdvCat" style="height:500px; width:285px;">
<option value="0" Title="">None</option>
<option value="1" Title="Accessories
Clothing
Footwear
Jewelry
Watches">Apparel, Footwear, Accessories</option>

All I really need to do is retrieve something so I can say ‘im over the x’ element so I can display some other information in a panel.

Is there a sensible way to do this?

I have the listbox wrapped in a div and have attached an event

function lstbox_AdvCatOver(mEvent) {
    //internet explorer
    if (mEvent.srcElement) {
        alert(mEvent.srcElement.nodeName);
    }
    //the others
    else if (mEvent.target) {
        alert(mEvent.target.nodeName);
    }
}

I was interested to see what I would get but I don’t know how to extend this to make it useful – any help.

Thanks.

Answer 1

Just using native JS it could look something like this:

http://jsfiddle.net/5QMdv/1/

HTML:

<select size="4" name="lstbox_AdvCat" id="foo" style="height:500px; width:285px;">
    <option value="0" Title="">None</option>
    <option value="1" Title="Accessories
    Clothing
    Footwear
    Jewelry
    Watches">Apparel, Footwear, Accessories</option>
</select>

JS:

function lstbox_AdvCatOver(mEvent) {
    alert("nodeName: [" + this.nodeName + "] - value: [" + this.value + "]");
}

var options = document.getElementById("foo").options;

for (var i = 0; i < options.length; i++) {    
    var option = options[i];
    option.onmouseover = lstbox_AdvCatOver;
}