如何为选择下拉列表分配空值？答案

【问题标题】：How to assign empty value to select dropdown?如何为选择下拉列表分配空值？
【发布时间】：2014-11-20 08:34:27
【问题描述】：

这适用于 Google Chrome 和 IE，但不适用于 Firefox。对于某些原因，Chrome 和 IE 允许分配空白值，即使它不是下拉选择的一部分。

document.getElementById('dropdownid').value = "";

请注意，我可以访问 jQuery，但没有做我想做的事。

$("#dropdownid").val("");

上面的 JQuery 没有将其设置为空白值，因为空白不是下拉选项的一部分。由于一些第三方遗留代码问题，我需要将“”分配给下拉选择值。

有什么想法吗？

【问题讨论】：

你能发布你正在使用的 HTML 吗？
@briosheje 它不是一个 div。应该是下拉（选择）控件
如果您可以将一些示例 select 输出从正在运行的网站复制到 JSfiddle，这将有助于模拟解决方案并在多个浏览器上进行测试 :) 使用 Chrome 的检查元素选项复制HTML :)
@overule, TrueBlueAussie：抱歉，请阅读“dropdowndiv”而不是“id”，我的错误，我在上面删除了。无论如何，上面的代码适用于我的所有浏览器。
只有我还是这个工作在 firefox jsfiddle.net/uvkv2b61/2 上？

标签： javascript jquery html

【解决方案1】：

将 selectedIndex 设置为 -1 会清除选择。

document.getElementById('dropdownid').selectedIndex = -1;

【讨论】：

这是正确的答案，尽管提问者认为，将值设置为空白字符串实际上并不会使 select 的值成为空白字符串。它所做的只是重置为原始默认值...
未经测试，但根据MDN documentation，selectedIndex 对HTMLSelectElements 是只读的。
@Andy 在 Chrome 和最新的 Firefox 中测试和工作
@Andy，selectedIndex 不是只读的，selectedOptions 是

【解决方案2】：

只需更改selectedIndex。例如：

$(function(){
    $dropdown = $("#dropdownid");
    alert($dropdown.val()); //alerts "2"
    $dropdown[0].selectedIndex = -1; //or document.getElementById('dropdownid').selectedIndex = -1;
    alert($dropdown.val()) //alerts null
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="dropdownid">
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
</select>

http://jsfiddle.net/kxoytdg8/

【讨论】：

【解决方案3】：

你可以试试
$(“#elementId”).val('');
例如 $(“#CountryDD”).val('');

【讨论】：

【解决方案4】：

您是否尝试过取消选择选择中的选项？

$("#dropdownid option").prop("selected", false);

【讨论】：

未测试，但这不起作用，因为没有空白选项。这只会将列表中的第一项设置为选定项。
@overule 查看 Tetaxa 的答案，它是正确的。

【解决方案5】：

你不能在设置之前给选择添加一个空白选项吗？

var jqDropdown = $('#dropdownid');
if (!jqDropdown.find('option[value=""]').length) {
  jqDropdown.prepend($('<option value=""></option>'));
}
jqDropdown.val("");

【讨论】：

可能是prepend，因为您希望列表中的第一个空白:)
无缘无故投反对票是不好的。你应该感觉不好。
投反对票有点不公平。它可能不是最好的选择，但对于没有初始空白选项的列表来说这是一个有效的答案（除了需要重用选择器并且不做=== 0）。
为了我自己的熏陶，=== 0有什么问题？我得到了效率问题，但在这种情况下，这可能不是 OP 关心的问题。永远不要在需要之前进行优化。 :)
在 jquery 中 !$('#dropdownid option[value=""]').length 是测试是否存在“无”匹配项的“标准”方式。至于效率，重用选择器只是在以后要求维护错误，所以应该是每个人最初关心的问题:)

【解决方案6】：

最好的方法是使用$("#dropdownid").html(''); 它使值为空。

【讨论】：

这是唯一在选择没有空白选项时有效的答案，并且在不需要这样的选项的情况下。唯一的另一种方法是添加空白选项，就像安迪所做的那样。请注意，此解决方案会完全从选择中删除“选项”，但如果需要，以后的 JS/Ajax 调用可以重新填充选择。

【解决方案7】：

2018 jQuery 3.2.1 答案

如果您在 jquery 选择器上链接方法， $('#selectId').slideUp(600)[0].selectedIndex = -1 似乎可以工作（至少在 Chrome 中），但打扰了我的“坚持一种语法/框架”偏好。

这也有效： $('#selectId').slideUp(600).find('option[selected]').attr('selected', false);

有点长，但是选择你喜欢的味道。

【讨论】：

【解决方案8】：

$("#dropdownid option[value='']").attr('selected', true)

【讨论】：