HTML选择元素-自定义默认值?(跨浏览器解决方案）

HTML select element - Custom default value? ( Cross-browser solution )

本文关键字：浏览器 解决方案 默认值 选择 元素 自定义 HTML      更新时间：2023-09-26

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

我想显示一个选择标签，上面写着："选择任何东西"，但我不希望这个字符串出现在选项列表中。

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

不需要optgroup或JavaScript:

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

JSFiddle

为了在关注select元素时隐藏一个选项（根据注释，这似乎是目的），最简单的方法是在关注select元素时删除第一个选项。为了明确起见，假设您想对一个分配了id=foo的select元素执行此操作，则此代码可以完成以下任务：

window.onload=函数（）{document.getElementById（'fo'）.onfocus=函数（）{this.removeChild（this.options[0]）；}；}

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

附言：尽管CSS有:focus选择器，但由于实现中的特殊性，您无法有效地使用CSS。select元件通常以或多或少不受CSS影响的方式来实现。

您可以通过在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>

查询：

$(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>

为什么不使用<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演示。

不利的一面是，<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演示。

参考文献：

  • <optgroup>
相关文章：