为什么在将新选项添加​​到选择时默认显示第一个选项

Question

首先，select的值为null（没有选择选项）并且已经存在一些选项。但是，分别通过jquery和vue在select中添加了一个新选项后，它变成了第一个选项的值，为什么？ （我们在 chrome 上测试了这个案例）

1.

<select>
    <option val="a">a</option>
    <option val="b">b</option>
<select>

此时：

$("select").val() == null

1. 使用 jquery$("select").append("<option value='hi'>hi</option>") 在 select 中添加一个选项

此时：

$("select").val() == "a"

Answer 1

默认情况下，HTML 倾向于选择一个选项。很可能您手动将 selectedIndex 设置为 -1 为 select 在将元素附加到选择后被覆盖。您有以下两种选择之一：

1. 检测您当前的selectedIndex 并在附加后恢复它。类似于var originalSelectedIndex = $("select").prop("selectedIndex"); $("select").append("<option value='...'>...</option>"); $("select").prop("selectedIndex", originalSelectedIndex); 的内容。
2. 创建一个带有空标签的初始元素，例如 <option label=" "></option>，这实际上会在提交时向您的服务器提交一个空值。