如何将空白 <option> 元素添加到 <option> 列表？答案

【问题标题】：How do I add a blank <option> element to a <option> list?如何将空白 <option> 元素添加到 <option> 列表？
【发布时间】：2015-08-13 00:39:05
【问题描述】：

情况：

我有一个option 类似的列表

<select class="database-column-name" name="caseid">
     <option value="1">1</option> 
     <option value="2">1</option> 
     <option value="3">1</option> 
</select>

默认情况下没有选择option，但是当您选择option 时，您将无法再次选择无！这会破坏我页面的用户体验，因为我需要用户完全不能选择任何选项。

问题：

有没有办法解决这个问题？

【问题讨论】：

添加一个具有空值的选项（或无效，如 -1）。确保在处理表单的地方处理新值。为新选项提供有意义的文本，例如“无”。或者，您可以使用 javascript 将 selectedIndex 设置为 -1。这将删除选择。

标签： javascript jquery html dom input

【解决方案1】：

就这么简单

<select class="database-column-name" name="caseid">
<option value=" ">--Select--</option> 
     <option value="1">1</option> 
     <option value="2">1</option> 
     <option value="3">1</option> 
</select>

【讨论】：

【解决方案2】：

$("select.database-column-name option").prop("selected", false);

你可以有一个“清除选择”按钮或触发此代码的东西。

【讨论】：

【解决方案3】：

前面的答案是一个非常好的选择。我要添加的唯一建议是将第一项的值设为“0”（零），这允许您的后处理代码查找特定值以确保“无选择”。当然，您可以查找“”，但这很容易与“”混淆。

<select class="database-column-name" name="caseid">
<option value="0">--Select--</option> 
<option value="1">1</option> 
<option value="2">1</option> 
<option value="3">1</option>

如果您想要一个实际的空白显示，而不是像“--Select--”这样的短语，那么只需将“--Select--”文本替换为空格即可。

<html>
<body>
<select class="database-column-name" name="caseid">
<option value="0"> </option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>

“值”部分不显示，并且存在以简化所选选项的基于代码的分析。在这种情况下，“0”值意味着没有选择任何选项。

【讨论】：

是的，我同意，“0”是一个值，这就是使用它的想法。也许我误解了你的意思？