Question

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

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

然后我尝试了两个选择，一个具有缩减列表，另一个具有完整列表（隐藏）。然后我使用javascript将选项从完整列表复制到简化列表，当用户将鼠标悬停在＆＃39;其他＆＃39; OPTGROUP。代码如下所示。

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中无效。我不知道为什么。

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

Answer 1

对于IE和Chrome中的选项，不会触发悬停事件。您可以尝试使用一些可能会执行此操作的脚本，我也在此网站上看到过其他帖子：

jquery hover event doesn't work with select option tag in google chrome?

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

创建一个选择下拉列表，当用户将鼠标悬停在某个选项上时，该列表会展开

1 个答案: