html - 如何有一个无法选择默认文本的下拉列表？

Question

例如，具有选项 1,2 和 3 但具有默认文本“进行选择...”而不是可选选项的下拉列表。

如果这令人困惑，那就是 fiddle。基本上，当您单击下拉菜单时，我不希望您在该示例中看到“进行选择...”。只有 1,2 和 3。

我认为它可以用一些 javascript 来完成，但这似乎是 hackish。

代码：

<select>
    <option>make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Answer 1

<select>
    <option selected="true" disabled="true" >make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>​

http://jsfiddle.net/Et4VH/

Answer 2

看起来您可以使用以下方法执行此操作display:none：

<select>
    <option style="display:none">make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

工作示例：http: //jsfiddle.net/66Tbz/2/

Answer 3

试试这个：

<select>
    <option disabled="true" >make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

如果这对您不起作用，您可能不得不求助于 Javascript，拦截点击并取消它们。

ETA：或者将它们组合起来：单击下拉菜单时，禁用“进行选择”选项，确保用户只能选择其他选项之一。挑战将是找到一个事件来触发再次启用“进行选择”。

ETA：嗯，以下内容可能处于“合理花费时间”的外部限制，但我将其包括在内是为了完整性：您可以构建一个由标签和隐藏列表框组成的“控件”，并带有图形标签的右侧触发列表框的可见性。您需要 javascript，并且使外观完全正确会很麻烦，但它可以完全按照您的描述进行。

但是，如果您达到了这一点，您不妨编写一些单击处理程序以用于常规下拉菜单，并调整其行为。

Answer 4

您可以按照 Ann 的建议添加一个disabled属性，但是默认情况下默认值将不再可见。

使用 a<label>来推荐选择，不要使用无意义<option>的。

<label for="foo">Select something</label>
<select name="foo" id="foo">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Answer 5

试试这个：

<select>
    <option selected="selected" disabled="true" >make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Answer 6

如果用户没有选择任何选项，您可以编写验证 javascript 函数并显示错误

<form onSubmit="validate()">
<select>
    <option>make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
</form>

Answer 7

而不是使用内联样式，（假设选择对象上的 id 为“selectid”）为什么不设置#selectid > option:first-child{ display: none; }？

我叉了你的小提琴。（嘿嘿嘿）

http://jsfiddle.net/qV9kp/

Answer 8

<select>
  <option value="" disabled="true">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>