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

我试图附加onclick和onchange事件，但没有见到很多成功。如何防止显示html选择（下拉框）选项

最终目标是覆盖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(); 
    }); 
});

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

来源

2011-07-22 deostroll

您介绍的步骤，制作HTML表单更漂亮一种变通方法，是几乎很普遍。例如，许多设计师创建自己的复选框，并将它们与JavaScript挂钩到其表单上的基础<input type='checkbox'元素。但是，你的做法有点不正常。

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

换句话说，不是试图将div或ul连接到select事件，而是使用div或ul的单击事件匹配select。

来源

2011-07-22 17:50:18

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

的最终目标是覆盖一个div或UL和显示选项，用户可以点击;这将更改选择框中的选项。是否有可能做到这一点？

顺便说一下，从你的问题，除非你想改变下拉框的外观，你能坚持到默认行为

来源

2011-07-22 17:43:28 Mrchief

+1。不要使用下拉框。使用别的东西。 – user606723

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

回答

相关问题