我试图附加onclick和onchange事件,但没有见到很多成功。如何防止显示html选择(下拉框)选项
最终目标是覆盖div或ul并显示用户可以点击的选项;这将会改变选择框上的选项。是否有可能做到这一点?
我在这里试过一些代码。非工作示例可以发现如下:
为下拉的标记:
Select A Country
India
Australia
United States Of America
Great Britan
Zimbabwe
Newzeland
这里是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();
});
});
这里的问题是,当我点击下拉菜单中的选项默认显示。我正试图阻止这一点。顺便说一句,我正在谷歌Chrome浏览器上做所有这些练习。后来我打算也测试其他浏览器。我知道有这样的库,但我只是想知道使用的技术。