Question

我有两个下拉菜单，我使用以下方法清空它：

document.getElementbyId("select1").options.length = 0;

当另一个被改变时。如何使用javascript将旧值重新填充？

Answer 1

您可以通过将innerHTML保存到变量中来实现此目的，然后将其清除：

普通Javascript

<script>

// Save it
var old_options = document.getElementbyId("select1").innerHTML;

// Clear it
document.getElementbyId("select1").options.length = 0;

// Refill it
document.getElementbyId("select1").innerHTML = old_options;

</script>

如果您可以使用，那么我强烈推荐jQuery。

jQuery版

<script>

// Save it
var old_options = $('#select1').html();

// Clear it
$('#select1').html('');

// Refill it
$('#select1').html(old_options);

</script>

Answer 2

在清空之前克隆原始选择：

var mySelect=document.getElementById("select1");
var savedSelect=mySelect.cloneNode(true);

稍后，您可以将savedSelect选项推回原始选择，例如使用循环：

for (var i=0;i<savedSelect.options.length;i++) {
    mySelect.appendChild(savedSelect.options[i].cloneNode(true));
}

还有其他复制选项，例如文档片段的使用。请注意，innerHTML不适用于IE中的select元素。

如何使用javascript清空下拉列表后重新填充下拉列表

2 个答案: