如何控制的默認行為 <select>元素使用js？

Question

最近，我不得不做一個“下拉菜單”。 因此，我在Google上搜索並看到了一些stackoverflow文章和有關它的博客文章。 通常，它們是關於如何使“選擇”元素不可見並將其轉換為“所有東西”並組成“選擇類似事物”的。

我想要的很簡單。 我只想制作我的SELECT-BOX，而不選擇類似的東西。 我並不是要低估那些制作自定義選擇框的嘗試，但是它必須要列出嗎？

以我的短時間經驗，html元素由瀏覽器控制。

所以..長話短說，我可以控制html元素的默認行為，例如如何使用javascript（在這種情況下選擇）在瀏覽器端呈現事物嗎？

這是我的問題得到啟發的地方。 因此，如果真的我不能直接控制它，那么我該如何間接操縱它呢？

Answer 1

根據W3C規范，在@ AlmasK89的答案中，表單元素由系統UI事件控制。

您可以通過CSS設置select元素的某些屬性的樣式，例如padding,font-family,font-size,background ，因此可以使用javascript在該特定元素上添加或刪除樣式。

簡短的答案仍然是，你不能。

Answer 2

您無法控制如何呈現諸如select，input [type =“ radio”]和input [type =“ checkbox”]之類的表單元素。 您只能控制捕捉事件，例如聚焦，更改，模糊等。或設置值和屬性。

1）要自定義他們的視圖，您可以使用js插件，例如隱藏原始的select並將其替換為另一個可自定義的元素，例如ul，li 。

2）您可以使用webcomponents（ http://webcomponents.org/ ）創建自己的元素，但是隨后您必須手動實現行為，並且忘記瀏覽器與舊版瀏覽器的兼容性

Answer 3

您可以使用Javascript實現此目的。 嘗試以下代碼：

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex 

您將通過選擇選項來獲得屬性，然后可以自定義其屬性

Answer 4

是的，您可以將其設置為通過onclick javascript方法觸發任何操作