Question

我有一个奇怪的问题。

我的下拉列表中包含否空值选项，即

<option value="">Select</option>

我的下拉菜单：

<select name="dropdown" id="dropdown">
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
</select>

但是，当我像这样设置下拉值时：

$('#dropdown').val("")

下拉列表显示一个空选项，尽管列表中没有此类选项。为什么会这样？我检查了我的代码和html，但没有找到任何空选项或任何设置空选项的代码。

这可能是什么原因？

Answer 1

如果您传递任何非现有值（没有必要传递“”）到此方法，它将清除select元素，因为没有匹配选项。因此，使用选定的索引动态选择选项。

$("#list")[0].selectedIndex = 1;

Answer 2

似乎设置 <select>元素的值会导致问题;可能是由于value元素的实现/处理方式不同<select>属性，例如：

＆＃13;

$('#dropdown').prop("value", function(){
  console.log(this.value, this.options[this.selectedIndex]);
  // 0 <option value="0">...</option>
}).val('').prop("value", function(){
  console.log(this.value, this.options[this.selectedIndex]);
  // undefined
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dropdown" id="dropdown">
  <option value="0">Option 0</option>
  <option value="1">Option 1</option>
</select>

＆＃13;

要将值设置为，例如1：

＆＃13;

$('#dropdown').prop("selectedIndex", function () {
    return $('options[value="1"]', this).index();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dropdown" id="dropdown">
  <option value="0">Option 0</option>
  <option value="1">Option 1</option>
</select>

＆＃13;

或者：

＆＃13;

$('#dropdown option[value="1"]').prop("selected", true);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dropdown" id="dropdown">
  <option value="0">Option 0</option>
  <option value="1">Option 1</option>
</select>

＆＃13;

下拉列表不包含空值，仍然会被选中

2 个答案: