CODEWITHSUNDEEP
javascript
Arvandor
Arvandor

Reputation: 191

Trying to move one option to another select list

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-complicating the matter?

Upvotes: 1

Views: 9183

Answers (5)

Hamza
Hamza

Reputation: 495

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

Upvotes: 0

Artem Panchoyan
Artem Panchoyan

Reputation: 25

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.net/Z8xRp/3/

Upvotes: 0

jasonscript
jasonscript

Reputation: 6170

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;

Upvotes: 4

babonamu
babonamu

Reputation: 397

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

Upvotes: 0

Itay Moav -Malimovka
Itay Moav -Malimovka

Reputation: 53607

Are you using one of the common js libraries (Mootools/jQuery)?
If not, read here https://developer.mozilla.org/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

Upvotes: 0

Related Questions