Question

I’m using a form with two select lists with a button.

I’m trying that when I click the button, I pass the select element from one select list to another.

The problem is, instead of removing 1 element, the selected element is removed alongside the one that follows in the list.

Here is my function:

  function removeOptions(s1,s2) {

    if (s1.options.length == 0) {
        alert('You have already removed all list items');
        return false;
    }

    var optionToRemove = s1.options.selectedIndex;
    var optn = s1.options[optionToRemove];

    s2.options.add(optn);
    s1.remove(optionToRemove);


    alert('success');
    return true;
}

My button configuration:

  <input type=button onClick="removeOptions(selectList1,selectList2)" ; value='Autorizar'>

I’m using Google Chrome.

Answer 1

Instead of :

 s2.options.add(optn);
 s1.remove(optionToRemove);

lines, try this:

 s2.appendChild(optn);

The optn element will be moved from s1 element to s2 element. The element (specifically optn) can’t have 2 or more parents at the same time, so optn will be removed from s1 automatically.