如何防止顯示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選擇（下拉框）選項

回答

相關問題