为什么动态地向select元素添加选项会改变其selectedIndex？

Plain and simple: Why does adding the option to the select element alters its selectedIndex and is there a way to either:

简单明了:为什么在select元素中添加选项会改变其selectedIndex,有没有办法:

Prevent this behavior

防止这种行为

Detect it

var list = document.getElementById("list");
list.selectedIndex = -1;
document.write("</br>Selected index: " + list.selectedIndex);
$(list).append('<option value="foo">foo</option>');
document.write("</br>Selected index: " + list.selectedIndex);
list.selectedIndex = -1;
document.write("</br>Selected index: " + list.selectedIndex);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list">      
</select>

2 个解决方案

#1

You can manually reset it after adding an option, basically add list.selectedIndex = -1; after $(list).append('<option value="foo">foo</option>');

您可以在添加选项后手动重置它,基本上添加list.selectedIndex = -1;在$(list).append('

#2

selectedIndex

By assigning -1 to this property, all items will be deselected. Returns -1 if no items are selected.

通过为此属性指定-1,将取消选择所有项目。如果未选择任何项,则返回-1。

For a normal select, it's only possible to have no items selected when there are no items to select. As soon as you add at least one item, a selection must exist.

对于正常选择,当没有要选择的项目时,只能选择没有项目。只要添加至少一个项目,就必须存在选择。

If you have a select multiple, however, the value will be preserved.

但是,如果您有一个选择倍数,则将保留该值。

var list = document.getElementById("list");

document.write("</br>Selected index: " + list.selectedIndex);
$(list).append('<option value="foo">foo</option>');
$(list).append('<option value="foo">foo</option>');
$(list).append('<option value="foo">foo</option>');
document.write("</br>Selected index: " + list.selectedIndex);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list" multiple>      
</select>

#1