如何使用 JavaScript 创建可悬停的选择框选项？

可悬停选择框选项

当前的问题涉及创建一个选择框，当将字段悬停在该选择框上时，选项描述可见，而不是单击打开

实现

为了实现此功能，我们使用了 JavaScript 方法，如下所示：

$('#selectUl li:not(":first")').addClass('unselected');
// Hide the 'unselected' elements in the ul.

$('#selectUl').hover(
    function(){
    // mouse-over
        $(this).find('li').click(
            function(){
                $('.unselected').removeClass('unselected');
                // removes the 'unselected' style

                $(this).siblings('li').addClass('unselected');
                // adds 'unselected' style to all other li elements

                var index = $(this).index();
                $('select option:selected').removeAttr('selected');
                // deselects the previously-chosen option in the select

                $('select[name=size]')
                    .find('option:eq(' + index + ')')
                    .attr('selected',true);
                // assumes a 1:1 relationship between the li and option elements
            });
    },
    function(){
    // mouseout (or mouseleave, if they're different, I can't remember).
    });

在这种方法中，未选择的类用于最初隐藏所有除第一个选项外的选项。当 ul 悬停在上方时，未单击的元素将被赋予未选择的类，从而有效地消失。所选元素保持可见，其相应的值反映在底层选择字段中。

以上是如何使用 JavaScript 创建可悬停的选择框选项？的详细内容。更多信息请关注PHP中文网其他相关文章！