如何在悬停而不是单击时显示选择框选项？

悬停以显示选择框选项

所提出的问题涉及创建一个在悬停时而不是单击后显示选项的选择框。提供的代码是一个简单的选择框：

<select name="size">
   <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</select> 

解决方案

提供的 jQuery 解决方案旨在实现所需的行为：

$('#selectUl li:not(":first")').addClass('unselected');
$('#selectUl').hover(
    function(){
    $(this).find('li').click(
        function(){
            $('.unselected').removeClass('unselected');
            $(this).siblings('li').addClass('unselected');
            var index = $(this).index();
            $('select option:selected').removeAttr('selected');
            $('select[name=size]')
                .find('option:eq(' + index + ')')
                .attr('selected',true);
        });
    },
    function(){
});

说明

• 代码最初通过添加“未选择”类来隐藏除第一个选项之外的所有选项。
• 将鼠标悬停在 ul 上时，可以单击在选项上更改选择。
• 单击一个选项将从所有其他选项中删除“未选定”类，并将其添加到单击的选项中，确保其保持可见。
• 所选选项的索引为用于更新选择元素，使更改持久化。

其他功能

解决方案已扩展为包括：

• 用于演示更新的选择元素值的警报。
• 用于提高所选和悬停选项的可见性的样式。
• 一种插件方法，可以更轻松地在其他项目中实现。
• 用于解释选择框用途的指导文本元素。

以上是如何在悬停而不是单击时显示选择框选项？的详细内容。更多信息请关注PHP中文网其他相关文章！