Question

从Chrome 81版本开始，从选择列表中拉出选项并用.append()重新添加选项似乎无法正常工作。此行为在Chrome 80中有效，并且在其他浏览器中仍然有效。我是在做错什么，还是Chrome中的错误？

示例代码步骤

获取选择列表
从中获取选项（在生产代码中，我正在操纵它们，但在本示例中不是）
从列表中删除选项
将选项重新添加到列表中

预期的行为

列表具有选项

实际行为

未显示任何选项，尽管DOM检查器显示它们存在

代码段

function test() {
   var selectItem = $("#selectOne");
   var items = selectItem.find('option');
   selectItem.empty();
   selectItem.append(items);  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectOne" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<br/>

<button onclick="test()">Go</button>

将以下行添加到我的javascript的末尾可以“修复”问题：

selectItem.get(0).innerHTML = selectItem.get(0).innerHTML;

但是，这显然不是实际的解决方法。我仅将其包括在此处，以防它比我更能帮助理解这一点的人找到问题。

编辑4月21日：https://bugs.chromium.org/p/chromium/issues/detail?id=1073172（感谢打开此文件的人！）

Answer 1

克隆您的option，这样做会再次呈现选项，

这是您唯一需要更改的行

var items = selectItem.find('option');

对此

var items = selectItem.find('option').clone();

function test() {
   var selectItem = $("#selectOne");
   var items = selectItem.find('option').clone();
   selectItem.empty();
   selectItem.append(items);  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectOne" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<br/>

<button onclick="test()">Go</button>

.append（），选择列表和Chrome 81问题

1 个答案: