Question

我在使用此answer

中的代码

var myOpts = document.getElementById('yourselect').options;
console.log(myOpts);
//prints HTMLOptionsCollection [ <option>, <option>, <option>, <option>, <option> ]

现在，在我已经在变量中存储了select的内容之后，我使用jQuery来清空select：

$('#yourselect').empty();
console.log(myOpts);
//prints HTMLOptionsCollection { length: 0, selectedIndex: -1 }

令我惊讶的是，变量也是空的。我的理解是该变量是一个副本，而不是对DOM元素的引用。

为什么会出现这种情况？有什么方法可以阻止它吗？

Answer 1

它是通过设计引用DOM中的实际对象。您可以使用<elem>.cloneNode()克隆它，并将其存储在变量中。

Answer 2

完成两者的简单方法是使用jQuery detach()

var $opts = $('#mySelect option').detach();

console.log('Stored options =', $opts.length)
console.log('Active options =',  $('#mySelect option').length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
  <option value="5">Item 5</option> 
</select>

Javascript DOM变量是引用而不是副本

2 个答案: