html - html选择元素，默认不在选项中

Question

可能重复：
<select> 占位符

我想做这样的事情：

<select>
    <option selected="selected">Choose option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

这是jsfiddle。

现在我希望第一个选项与内容“选择选项”的选定选项在下拉列表中不可见。我该怎么做，如果可以使用选择元素或者我应该做一个自定义的事情。提前致谢。

Answer 1

我相信最接近纯 HTML 解决方案的方法是禁用该选项：

<select>
    <option selected="selected" disabled="disabled">Choose option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

演示

该元素仍将出现在列表中，但将显示为灰色，并且在打开后无法从下拉列表中选择它。

Answer 2

您可以在打开列表后立即删除所选元素：

$('select').click(function () {
  $('option[selected="selected"]', this).remove();
});

我不知道有任何原生 HTML/HTML5 解决方案。

Answer 3

<select>
    <option selected="selected" disabled="disabled">Choose option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

这将在选择之前显示“选择选项”，但不允许用户选择它。