如何添加空白<选项>元素添加到一个<列表

How do I add a blank <option> element to a <option> list?

本文关键字：添加 一个 列表 元素 空白 何添加 选项      更新时间：2023-09-26

情况:

我有一个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时，您不能再次返回选择none !这将破坏我的页面的用户体验，因为我需要用户完全不选择任何选项。

问题:

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

就是这么简单

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

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

你可以有一个"清除选择"按钮或其他东西来触发这段代码

前面的答案是一个很好的选择。我要添加的唯一建议是将第一项的值设置为"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>

"value"部分不显示，呈现它是为了简化对所选选项的基于代码的分析。在本例中，值"0"意味着没有选择任何选项。

相关文章：