如何在javascript中自动选择下拉列表中的项目

Question

我有两个不同项目的下拉列表。如果我在dropdownlist1中选择一个项目，那么该选定项目应该添加到dropdownlist2中并且应该被选中。 使用下面的javascript代码，我可以在dropdownlist2中添加项目，但它没有被选中。请让我知道如何自动选择新添加的项目。

var domName = document.getElementById("dropdownlist1");
var domSelectedText = domName.options[domName.selectedIndex].text;
var domSelectedValue = domName.options[domName.selectedIndex].value;
var opt = document.createElement("option");
opt.text = domSelectedText;
opt.value = domSelectedValue;
document.getElementById("dropdownlist2").options.add(opt);

Answer 1

我认为您只需要再添加一行来将新添加的项目标记为已选中。

opt.selected = true;

Answer 2

您可以将代码缩减为：

var domName = document.getElementById("dropdownlist1"),
selectedOption = domName.options[domName.selectedIndex].cloneNode(true);

document.getElementById("dropdownlist2").appendChild(selectedOption);

Demo

Answer 3

你的生活方式比它需要的更困难。考虑克隆节点而不是复制它：

var domName = document.getElementById("dropdownlist1");

if (domName.selectedIndex >= 0) {
  var opt = domName.options[domName.selectedIndex].cloneNode(true);
  opt.selected = true;
  document.getElementById("dropdownlist2").appendChild(opt);
}

Answer 4

尝试

var opt = new Option(domSelectedText, domSelectedValue)
Array.prototype.push.call(document.getElementById("dropdownlist2").options, opt)

Answer 5

var domName = document.getElementById("dropdownlist1");
var domSelectedText = domName.options[domName.selectedIndex].text;
var domSelectedValue = domName.options[domName.selectedIndex].value;
var sel2 = document.getElementById("dropdownlist2");
sel2.options[sel2.options.length]=new Option(domSelectedText,domSelectedValue)
sel2.selectedIndex = sel2.options.length-1;