I've tried searching this and all the answers are way above my head, and are just confusing and frustrating me... All I'm trying to do is make an option from the left list that is selected, move to the right list when I click a button. This is the script I'm attempting to use, and it isn't working for me...

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

Any thoughts on how to make this work without over-plicating the matter?

I've tried searching this and all the answers are way above my head, and are just confusing and frustrating me... All I'm trying to do is make an option from the left list that is selected, move to the right list when I click a button. This is the script I'm attempting to use, and it isn't working for me...

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

Any thoughts on how to make this work without over-plicating the matter?

• javascript

• can you please also share a snippet of your html? it would be helpful to see the markup of your form. – grammar Commented Nov 1, 2013 at 2:16
• It's hard to copy paste, since I'm posting from a different puter, but I'll give some example of my html... <select name = "leftList" size = "10"> <option value = "example">Example</option> </select> <input type="button" value="&#62;&#62;" onclick = "moveRight();" /> – Arvandor Commented Nov 1, 2013 at 14:24

5 Answers 5

There were three problems in your code:

1. Use document.getElementById instead of document.forms[0].leftList
2. Use cloneNode and removeChild and appendChild to move your elements around
3. I didn't see any place you were calling your function moveRight. Had to add an onchange event

Sample code:

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;

Are you using one of the mon js libraries (Mootools/jQuery)?
If not, read here https://developer.mozilla/en-US/docs/Web/API/Node.appendChild At the end there is a link on how to remove a dom element, and the link I gave you, is how to attach the dom element where u need to.

Cheers

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

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

to

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

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

There are quite a few ways of doing what you are trying to achieve. I don't know your requirements that's why I tried to keep the code as close to what you tried as possible.

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

Check it on http://jsfiddle/Z8xRp/3/

I'm a little bit late but here is a solution ( move between multiple selects ) i just changed some lines from an older solution

demo : http://jsfiddle/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);
    }
}