HTML select元素 - 自定义默认值？ （跨浏览器解决方案）

Question

如何将自定义（非选项）文本显示为选择的默认值？

我想显示一个选择标记：“选择任何”， 但我不希望这个字符串出现在选项列表中。

在您的回答中 - 如果可能 - 请避免重叠元素和其他廉价解决方案，以保持跨浏览器支持。

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 Fiddle demo

缺点是<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 Fiddle demo

参考文献：

• <optgroup>。

Answer 4

为了在关注select元素时隐藏选项（根据评论似乎是意图），最简单的方法是在select时删除第一个选项元素集中在。假设，为了确定性，您希望为单个select元素执行此操作，该元素已分配id=foo，此代码将完成此任务：

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

但这有一些可用性问题。当使用集中在元素上时，提示会永远丢失，如果用户只是在表单周围移动并且稍后他实际想要进行选择时可能需要提示，则这是不好的。 （通过在模糊上恢复它来解决这个问题并不那么简单，因为表单提交也会使元素模糊。）当用户在元素内部进行选择时，提示不可用，但这在请求中是继承的。根据可访问性原则，控件应具有使用label元素与之关联的标签。

P.S。尽管CSS具有:focus选择器，但由于实现中的特殊性，您无法有效地将CSS用于此目的。 select元素通常以对CSS或多或少免疫的方式实现。