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

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

使用document.getElementById代替document.forms[0].leftList
使用cloneNode和removeChild以及appendChild移动元素
我没有看到您调用函数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;

Answer 2

您使用的是常见的js库（Mootools / jQuery）吗？如果没有，请在此处阅读https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild 最后有一个关于如何删除dom元素的链接，以及我给你的链接，是如何将dom元素附加到你需要的地方。

干杯

Answer 3

var nextItem = document.forms[0].rightList.length;

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

到

var option = document.createElement("option");
option.value = selValue;
option.text = selText;

document.forms[0].rightList.appendChild(option);

Answer 4

有很多方法可以做你想要达到的目标。我不知道你的要求，这就是为什么我试图让代码尽可能接近你所尝试的。

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 {
        document.forms[0].rightList.add(document.forms[0].leftList[selItem], null);
    }
}

在http://jsfiddle.net/Z8xRp/3/

上查看

Answer 5

我有点晚了，但这是一个解决方案（在多个选择之间移动）我只是从旧解决方案改变了一些行

演示：http://jsfiddle.net/rTxb8/

    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 {
        document.forms[0].rightList.add(document.forms[0].leftList[selItem], null);
    }
}

function moveLeft() {
    var selItem = document.forms[0].rightList.selectedIndex;
    if (selItem == -1) {
        window.alert("You must first select an item on the left side.")
    } else {
        document.forms[0].leftList.add(document.forms[0].rightList[selItem], null);
    }
}

尝试将一个选项移动到另一个选择列表

5 个答案: