javascript - 试图将一个选项移动到另一个选择列表

Question

我试过搜索这个，所有的答案都超出了我的理解范围，让我感到困惑和沮丧......我想要做的就是从左侧列表中选择一个选项，移动到单击按钮时显示正确的列表。这是我正在尝试使用的脚本，但它对我不起作用...

function moveRight() {
var selItem = document.forms[0].leftList.selectedIndex;

 if (selItem == -1) {
  window.alert("You must first select an item on the left side.")
 }

 else {
  var selText = document.forms[0].leftList[selItem].text;
  var selValue = document.forms[0].leftList[selItem].value;
  var nextItem = document.forms[0].rightList.length;

  document.forms[0].rightList[nextItem].text = selText;
  document.forms[0].rightList[nextItem].value = selValue;
 }
}

关于如何在不使问题过于复杂的情况下完成这项工作有什么想法吗？

Answer 1

您的代码中存在三个问题:

1. 使用 document.getElementById 代替 document.forms[0].leftList
2. 使用 cloneNode 和 removeChild 和 appendChild 来移动你的元素
3. 我没有看到您调用函数 moveRight 的任何地方。必须添加一个 onchange 事件

示例代码:

function moveRight() {
    var leftlist = document.getElementById("leftList");
    var selItem = leftlist.selectedIndex;

    if (selItem == -1) {
        window.alert("You must first select an item on the left side.")
    } else {
        var rightlist = document.getElementById("rightList");
        var newOption = leftlist[selItem].cloneNode(true);

        leftlist.removeChild(leftlist[selItem]);
        rightlist.appendChild(newOption);
    }
}

document.getElementById('leftList').onchange = moveRight;