如何隱藏默認值 <select><option>點擊下拉菜單時？

Question

我想要一個<select>元素，默認選擇的選項是“____”。 換句話說，空白。

當關注下拉列表時，我希望“____”選項不在可以選擇的選項中。 這樣，用戶必須選擇“____”以外的選項作為選項。

那有意義嗎？

插圖

關閉：

開業時間：

如您所見，選擇“___”選項時不在列表中。 那是我期望的最終結果。

我已經嘗試使用onFocus事件來刪除選項，但這只是取消了元素，並將默認選項替換為另一個。

Answer 1

您可以利用HTML中的hidden屬性。 試試這個例子

<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

檢查這個小提琴或下面的截圖。

點擊之前：

點擊后：

Answer 2

要隱藏默認選項，允許其他人顯示，有幾種方法可以使用。

不幸的是，您無法在所有瀏覽器中隱藏選項元素。 再次， display:none; 不適用於所有瀏覽器的options ...

在過去，當我需要這樣做時，我已經設置了他們的禁用屬性，就像這樣......

$('option').prop('disabled', true);

然后我使用隱藏它在瀏覽器中支持它使用這塊CSS ...

select option[disabled] {
    display: none;
}

Answer 3

CSS是你的朋友，你想要隱藏的選項設置display:none 。

<select>
<option style="display:none" selected="selected" value=""> </option>
<option value="visi1">Visible1</option>
<option value="visi2">Visible2</option>
<option value="visi3">Visible3</option>
</select>

這是一個額外的jQuery，將確保任何選擇的第一個選項是不可見的：

$('select:first-child').css({display:none;});