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>

这将在选择之前显示"选择选项",但不允许用户选择它.