HTML選擇元素-自定義默認值？ （跨瀏覽器解決方案）

Question

如何顯示自定義（非選項）文本作為選擇的默認值？

我想顯示一個選擇標簽，上面寫着：“ Choose what”，但是我不希望這個字符串出現在選項列表中。

在您的回答中-如果可能的話-請避免元素重疊以及其他便宜的解決方案，以保持跨瀏覽器支持。

Answer 1

不需要optgroup或JavaScript：

<select>
  <option disabled selected>Choose whatever</option>
  <option>1</option>
</select>

的jsfiddle

Answer 2

您可以通過顯示span內的默認選項（即不作為select的一部分）來實現此目的。

HTML：

<span id="default_message">Choose whatever</span>
<select id="my_select">
    <option value="1">Option 1</option>  
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

JQUERY：

$(document).ready(function() {

    $('#my_select').prop("selectedIndex", -1);

    var offset = $('#my_select').offset();
    offset.top += 3;
    offset.left += 3;
    $('#default_message').offset(offset);

    $('#my_select').change(function() {
        if ($(this).prop("selectedIndex") != -1) {
            $('#default_message').hide();
        }
    });
});

還有你的CSS：

#default_message {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

您還可以將默認選項設置為disabled ，然后它將無法選擇，但它將與其他選項一起顯示在列表中。

<select id="my_select">
    <option value="1" selected disabled>Choose whatever</option> 
    <option value="1">Option 1</option>  
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Answer 3

為什么不使用<optgroup> ：

<select id="my_select">
    <optgroup label="choose whatever">
        <option value="1">Option 1</option>  
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </optgroup>
</select>

JS小提琴演示 。

<optgroup>是<optgroup>的標簽僅在打開<select>可見，而不是顯示的（默認值或）選定值。

僅使用HTML和CSS：

<select>
    <option disabled selected>Select something</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

使用CSS：

select:focus option:disabled {
    display: none;
}

JS小提琴演示 。

參考文獻：

• <optgroup> 。

Answer 4

為了在select元素被關注時隱藏一個選項（根據注釋，這似乎是意圖），最簡單的方法是在select元素被關注時刪除第一個選項。 為了確定性，假設您要對一個為其分配了id=foo的單個select元素執行此操作，此代碼將完成此工作：

window.onload = function（）{document.getElementById（'foo'）。onfocus = function（）{this.removeChild（this.options [0]）; }; }

但是，這存在一些可用性問題。 當使用重點放在元素上時，提示將永遠消失，如果用戶只是在表單中移動並且稍后當他實際上要進行選擇時可能需要提示，則這是很糟糕的。 （通過模糊恢復來解決這個問題並不那么簡單，因為表單提交也使元素模糊了。）當用戶在元素內部進行選擇時，提示不可用，但這是在請求中繼承的。 根據可訪問性原則，控件應具有標簽，並使用label元素與其關聯。

PS盡管CSS具有:focus選擇器，但由於實現方面的特殊性，因此您無法有效地使用CSS。 select元素通常以或多或少不受CSS干擾的方式實現。