嘗試將一個選項移至另一選擇列表

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;

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);
    }
}