html选择元素默认不在选项中[重复]

Posted 2023-03-05

【中文标题】html选择元素默认不在选项中[重复]

【英文标题】：html select element with default not in the options [duplicate]

【发布时间】：2012-12-27 06:23:15

【问题描述】：

可能重复：<select> placeholder

我想做这样的事情：

<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.

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

【问题讨论】：

对不起，如果你不想让它出现，为什么不直接删除它？

因为我希望它在第一次加载页面时出现，所以我不想默认选择第一个选项。

@TillHelgeHelwig，你认为这个问题在这里是一样的，因为？！？！

据我所知 selected="selected" 并不完全有效。由于选定的属性本身是选项语句中的布尔语句，因此它的存在单独表示为真，或不存在为假。这是基于规范的 w3c 示例页面：w3.org/wiki/html/Elements/option

【参考方案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>

Demo

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

【讨论】：

是的，我知道我希望有另一个解决方案。无论如何，谢谢。

【参考方案2】：

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

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

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

【讨论】：

只有在我选择一个选项后才会删除所选项目，而不是当我点击打开下拉菜单时，请查看我的jsfiddle

嗯...对我来说很好用。你用什么浏览器？

当您点击打开下拉菜单时，选定的选项是否被删除。

在 Chrome、Firefox、Opera 甚至 IE 中都能正常工作。

实际上它在 Firefox 上运行良好，但 chrome 仍然不适合我。

【参考方案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>

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