IE 选择的鼠标悬停选项

Question

我正在使用 IE7。当鼠标悬停在选项上时，我想在页面中为选择框中的每个选项显示一个描述。因此，在开始时，我编写了当鼠标悬停在选项上时在文本框中显示选项值的代码。但它永远不会奏效。它就像一个更改事件一样工作。

<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>

提前致谢

Answer 1

我会使用某种类型的插件（如this one），它可以跨浏览器兼容并操纵ul 看起来像select 下拉菜单。

不幸的是，IE 将球丢在 select 元素上，让您几乎无法控制它们。

Answer 2

您尝试做的不是标准的网络实践。我没有说错，我明白你为什么想做这样的事情。我认为您的答案是不要打扰选择控件，而是尝试查找或设计一个与输入元素一起使用的控件，并模仿“选择”正在做的事情。这不会那么困难，最终您可能会拥有更好的控制和跨浏览器能力。

Answer 3

如果您希望描述显示在 mouseover 上，而不是 change 上，我认为最好使用工具提示。这可以通过 HTML 的 title 属性来完成，不需要 JS。

示例：

<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>