如何使用 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中文網其他相關文章！