Mouseover option of select for IE

Question

I'm using IE7. I want to have show a description in the page for each option in the select box when the mouse is over the option. So as starting I wrote the code which shows the option value in the text box when mouse is over an option. But it never works. It works as if a change event.

<input name="selectedValue" id="selectedValue" >
<select id="TestCombo" name="TestCombo" >
     <option value="0" selected="selected">Zero</option>    
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
</select>

<script type="text/javascript">
$( function() {
    $('#TestCombo option').mouseover( function() {
          $('#selectedValue').val($('#TestCombo option:selected').val());
    });
});
</script>

Thanks in advance

Answer 1

If you want the description to show up on mouseover, not on change, I think it's better to use tooltips. That can be done with HTML's title attribute, no JS needed.

Example:

<input name="selectedValue" id="selectedValue">
<select id="TestCombo" name="TestCombo" >
  <option title="Nothing." value="0" selected="selected">Zero</option>    
  <option title="The smallest number that has a meaning." value="1">One</option>
  <option title="Look, another small number!" value="2">Two</option>
  <option title="RGB - Red-Green-Blue. That's three colors!" value="3">Three</option>
</select>

Answer 2

What you are trying to do is not a standard web practice. I'm not saying its wrong, I can see why you'd want to do something like this. I think your answer is to not bother with the select control and try finding or designing a control that works with input elements instead and mimic what 'select' is doing. It wouldn't be that difficult and in the end you would probably have greater control and cross-browser capability.