html显示默认选项但是不选,如何防止显示html选择（下拉框）选项

我试图附加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浏览器上做所有这些练习。后来我打算也测试其他浏览器。我知道有这样的库，但我只是想知道使用的技术。