Question

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

如果那令人困惑here is a 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

试试这个：

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

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

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

ETA：嗯，以下内容可能是“合理花时间”的外部限制，但我将其包含在内以表示完整性：您可以构建一个由标签和隐藏列表框组成的“控件”，标签右侧的图形，用于触发列表框的可见性。你需要javascript，让外观非常正确会很麻烦，但它可以完全按照你所描述的那样做。

但是，如果你达到这一点，你可能只需编写一些点击处理程序的常规下拉列表，并调整其行为。

Answer 3

您似乎可以使用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 4

您可以像Ann建议的那样添加disabled属性，但默认情况下默认情况下不再可见。

使用<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>

如何有一个下拉列表，其中无法选择默认文本？

8 个答案: