如何防止顯示 html select（下拉）框選項

Question

我試圖附加到 onclick 和 onchange 事件，但沒有取得很大的成功。

最終目標是覆蓋一個 div 或一個 ul 並顯示用戶可以點擊的選項； 這將更改 select 框上的選項。 是否有可能做到這一點？

我在這里嘗試了一些代碼。 可以在下面找到非工作示例：

http://jsfiddle.net/deostroll/Yed7p/1/

下拉菜單的標記：

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

這里的問題是，當我單擊下拉菜單時，默認情況下會顯示選項。 我試圖阻止這種情況。 順便說一句，我在 google chrome 瀏覽器上做所有這些練習。 后來我也打算測試其他瀏覽器。 我知道有一些庫可以做到這一點，但我只是想知道使用的技術。

Answer 1

AFAIK，沒有辦法做到這一點。 您最好的選擇是使用自定義下拉菜單（插件或您自己的實現）。

最終目標是覆蓋一個 div 或一個 ul 並顯示用戶可以點擊的選項； 這將更改 select 框上的選項。 是否有可能做到這一點？

順便說一句，從您的問題來看，除非您想更改下拉框的外觀，否則您可以堅持默認行為

Answer 2

您描述的過程是使 HTML forms 更漂亮並且幾乎很常見的解決方法。 例如，許多設計人員創建自己的復選框，並將 JavaScript 與表單上的底層<input type='checkbox'元素掛鈎。 但是，你這樣做的方式有點不正常。

不要試圖用 div 或 ul 覆蓋select元素。 只需創建一個 div 或 ul 作為用戶看到的東西，然后通過 JavaScript，嘗試模仿一個下拉列表。 每當用戶單擊列表中的任何項目時，獲取值並相應地設置您選擇的值。

換句話說，與其嘗試將 div 或 ul 掛鈎到 select 事件中，不如將 select 與 div 或 ul 的點擊事件匹配。