0

我正在尝试创建一个具有基本列表的选择元素，然后当用户将鼠标悬停在一个选项上时，它会展开以显示更完整的列表。

我开始使用 css 隐藏我想要隐藏的所有值，但这并没有调整选择下拉列表的高度，所以我留下了很多空白。

然后我尝试有两个选择，一个带有简化列表，另一个带有完整列表（隐藏）。然后，当用户将鼠标悬停在“其他”选项组上时，我使用 javascript 将选项从完整列表复制到简化列表。代码如下所示。

html:

<select id="Title">
     <option value="">Select...</option>
     <option value="MR">Mr</option>
     <option value="MISS">Miss</option>
     <option value="MRS">Mrs</option>
     <optgroup label="Other">Other</optgroup>
</select>

<select id="FullTitle" style="display:none">
     <option value="">Select...</option>
     <option value="MR">Mr</option>
     <option value="MISS">Miss</option>
     <option value="MRS">Mrs</option>
     <option value="MS">Ms</option>
     <option value="DR">Doctor</option>         
</select>

Javascript：

<script type="text/javascript">
            $('select').find('optgroup').hover(
              function () { 
                var parent = $(this).parent()
                var selected = parent.find('option:selected').val()
                var id = "#Full" + parent.attr('id')                
                parent.html($(id).html())
                parent.find('option[value="'+ selected +'"]').attr('selected', 'selected')
              })
        </script>

这在 Firefox 中运行良好，但在 IE 或 Chrome 中均无效。我不确定为什么。

我想知道是否有人知道为什么这不起作用或解决我的问题的更好方法？

4

1 回答 1

1

IE 和 Chrome 中的选项不会触发悬停事件。您可以尝试一些可能会执行此操作的脚本，并且我在此站点上也看到了其他有关它的帖子：

jquery 悬停事件不适用于谷歌浏览器中的选择选项标签？

从我所见，将其转换为 div/ul 并使用 css/jquery 使其看起来像一个选择列表可能是您最好的选择。

于 2013-01-07T15:53:40.883 回答