Question

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

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

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

下拉列表的标记：

<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();
    }); 
});

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

Answer 1

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

最终目标是覆盖div或ul并显示选项用户可以点击的位置;这将改变选项选择框。是否可以这样做？

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

Answer 2

您描述的过程是使HTML表单更美观且几乎常见的解决方法。例如，许多设计人员创建自己的复选框，并使用JavaScript将其挂钩到表单上的基础<input type='checkbox'元素。但是，你这样做的方式有点不正常。

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

换句话说，不是尝试将div或ul挂钩到select事件中，而是将select与div或ul的click事件匹配。

如何防止显示html选择（下拉列表）框选项

2 个答案: