如何防止显示 html 选择（下拉）框选项答案

【问题标题】：how to prevent html select (dropdown) box options from displaying如何防止显示 html 选择（下拉）框选项
【发布时间】：2011-07-23 01:50:18
【问题描述】：

我试图附加到 onclick 和 onchange 事件，但没有取得很大成功。

最终目标是覆盖一个div或一个ul，并显示用户可以点击的选项；这将更改选择框上的选项。可以这样做吗？

我在这里尝试了一些代码。可以在下面找到非工作示例：

http://jsfiddle.net/deostroll/Yed7p/1/

下拉菜单的标记：

<select>
    <option value="000">Select A Country</option>
    <option value="001">India</option>    
    <option value="002">Australia</option>    
    <option value="003">United States Of America</option>
    <option value="004">Great Britan</option>
    <option value="005">Zimbabwe</option>
    <option value="006">Newzeland</option>    
</select>

这里是javascript：

$(function(){
    $('select').click(function(e){      
        var ul = document.createElement('ul');
        $(this).children().each(function(){
            var li = document.createElement('li');
            $(li).html($(this).text());
            $(li).data("value", $(this).val());
            $(ul).append(li);
        });
        $('body').append(ul);
        var cordinates = $(this).offset();
        $(ul).offset({top:cordinates.top + 10 + $(this).height(), left:cordinates.left});
        $(ul).show('slow');
        e.preventDefault();
    }); 
});

这里的问题是，当我单击下拉菜单时，默认情况下会显示选项。我试图阻止这种情况。顺便说一句，我在谷歌浏览器上做所有这些练习。后来我也打算测试其他浏览器。我知道有一些库可以做到这一点，但我只是想知道使用的技术。

【问题讨论】：

标签： javascript jquery html select overlay

【解决方案1】：

AFAIK，没有办法做到这一点。最好的选择是使用自定义下拉菜单（插件或您自己的实现）。

最终目标是覆盖一个 div 或一个 ul 并显示选项用户可以点击的地方；这将改变选择框。可以这样做吗？

顺便说一句，从你的问题来看，除非你想改变下拉框的外观，否则你可以坚持默认行为

【讨论】：

【解决方案2】：

您描述的过程是一种使 HTML 表单更美观的解决方法，并且几乎很常见。例如，许多设计师创建自己的复选框，并使用 JavaScript 将它们与表单上的底层 <input type='checkbox' 元素挂钩。不过，你的做法有点不正常。

不要尝试用 div 或 ul 覆盖您的 select 元素。只需创建一个 div 或 ul 作为用户看到的东西，并通过 JavaScript 尝试模仿一个下拉列表。每当用户单击列表中的任何项目时，获取值并相应地设置您选择的值。

换句话说，与其尝试将 div 或 ul 挂钩到 select 事件中，不如将 select 与 div 或 ul 的点击事件匹配。

【讨论】：