如何将空值分配给下拉选择框？

Question

这在谷歌浏览器和IE上可以正常工作，但在Firefox上不行。由于某些原因，Chrome和IE允许将空值分配给下拉选择框，即使它不是下拉列表中的一部分。

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

请注意，我可以使用jQuery，但它并没有做我想要的事情。

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

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

有任何想法吗？

- ove

---

@overule，TrueBlueAussie：抱歉，我读成“dropdowndiv”而不是“id”，这是我的错误，我正在删除上面的内容。无论如何，以上代码在所有浏览器上对我都有效。 - briosheje

@briansol：jQuery的.val()会设置它，但如果没有空条目，则不会将其设置为空（至少在所有浏览器上都是如此）。 - iCollect.it Ltd

@TrueBlueAussie 是的，那就是问题所在。我正在尝试将其设置为“无”。 - ove

在这种情况下，为什么不附加一个选项，其值为""并将其设置为已选择？ - BReal14

这只是我的问题还是在 Firefox 上有效 http://jsfiddle.net/uvkv2b61/2/？ - Alex Char

Answer 1

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

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

- Tetaxa

---

这是正确的答案，尽管提问者认为将值设置为空字符串实际上并不会使选择的值成为空字符串。它只是重置为原始默认值... - Mike

未经测试，但根据MDN文档，selectedIndex对于HTMLSelectElements是只读的。 - Andy

@Andy 在 Chrome 和最新版本的 Firefox 中测试并且可以正常工作。 - Tetaxa

@Andy，selectedIndex不是只读的，selectedOptions才是。 - Tetaxa

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

- Moob

Answer 3

你可以尝试使用以下代码清空输入框的值：
$(“#elementId”).val('');
例如：$(“#CountryDD”).val('');

- CodingSolutions

Answer 4

在设置之前，您能否在选择框中添加一个空白选项？

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

- Andy

---

那个踩票有点不公平。这可能不是最好的选择，但对于一个没有初始空选项的列表来说，这是一个有效的答案（除了需要重用选择器而不是使用 === 0）。 - iCollect.it Ltd

为了自己的学习，=== 0 的问题在哪里？我知道效率是个问题，但这可能不是这种情况下的关注点。在需要之前不要进行优化。 :) - Andy

在jQuery中 !$('#dropdownid option[value=""]').length 是测试是否没有匹配的“标准”方式。就效率而言，重复使用选择器只会导致后续维护错误，因此应该是每个人的首要关注点 :) - iCollect.it Ltd

虽然这些都是对他的代码的有效批评，但这个问题的重点是解决提问者的问题。代码可以在之后进行编辑以改进。 - Mike

不是要求什么，但点赞的目的不就是喜欢问题的回答方式吗？ - Andy

Answer 5

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

- aafaq ahmad

---

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

Answer 6

你尝试过取消选择下拉框中的选项吗？ $("#dropdownid option").prop("selected", false);

- Sumit

---

未经测试，但这不起作用，因为没有空白选项。这只会将列表中的第一项设置为所选项。 - Andy

@overrule请忽略Tetaxa的回答，它是正确的。 - Mike

Answer 7

2018 jQuery 3.2.1答案

如果您正在对jquery选择器进行方法链接， $('#selectId').slideUp(600)[0].selectedIndex = -1 看起来可以工作（至少在Chrome中），但它违背了我的“坚持一种语法/框架”的偏好。

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

虽然有点长，但可以选择您喜欢的风格。

- eon

Answer 8

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

- Muhammad Kamran