【问题标题】:html select element with default not in the options [duplicate]html选择元素默认不在选项中[重复]
【发布时间】: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

标签: html


【解决方案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>

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

【讨论】:

    猜你喜欢
    • 2015-11-15
    • 2016-02-20
    • 2019-01-16
    • 2014-07-26
    • 2012-12-12
    • 2020-05-29
    • 2022-11-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多