如何在懸停而不是單擊時顯示選擇框選項？

懸停以顯示選擇框選項

所提出的問題涉及創建一個在懸停時而不是單擊後顯示選項的選擇框。提供的程式碼是一個簡單的選擇框：

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