Move items across between multiple select

Question

I have two multi selects viz . mySelectNumberTest1 and mySelectNumberTest2 . What I want to do is be able to select items in the first dropdown and when I click on a checkbox/button or any control that will trigger an event, it should take the options from mySelectNumberTest1 and populates it into mySelectNumberTest2 .

I have followed this link: Get selected value in dropdown list using JavaScript? its a partial solution to my problem. The only thing that's missing is that if you select more than one item in mySelectNumberTest1 it will only take the first item and populate it into mySelectNumberTest2 .

The below code only works when I am populating items from a select into a normal input textbox.

 <select id="mySelectNumberTest1" name="mySelectNumberTest" multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
 </select>
<input  type="checkbox" id="tickHereToMove" />
<input id="mySelectNumberTest2" name="mySelectNumberTest2" type="text" onchange="copyTextValueTest(this);" />


function copyTextValueTest(bf) {
    var e = document.getElementById("mySelectNumberTest1");
    var strUser = e.options[e.selectedIndex].text;
    document.getElementById("mySelectNumberTest2").value = strUser;
    alert(strUser);
}

There's also a few problems with this approach as it concatenates the text. I tried the .split() function and that still didn't give me the result I wanted. I want the selected items in each line on mySelectNumberTest2 .

This library http://quasipartikel.at/multiselect/ does EXACTLY what I want to do. I am working in an Angular JS project and when I try include the jquery scripts in my index.html page, it causes anomalous behaviour and messes up the styling of the page as well.

So if I select 1 and 3 in mySelectNumberTest1 , it should populate it in mySelectNumberTest2 in two different lines and not 12 .

If this can be achieved in a drag and drop implementation I would also be happy.

Answer 1

Simply do this:

 function addOptions( fromId, toId ) { var fromEl = document.getElementById( fromId ), toEl = document.getElementById( toId ); if ( fromEl.selectedIndex >= 0 ) { var index = toEl.options.length; for ( var i = 0; i < fromEl.options.length; i++ ) { if ( fromEl.options[ i ].selected ) { toEl.options[ index ] = fromEl.options[ i ]; i--; index++ } } } } 

 ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 70px 40px 70px; grid-gap: 10px } select { width: 70px } li.relative { position: relative } #add { position: absolute; width: 40px; font-size: 18px; top: 0 } #remove { position: absolute; width: 40px; font-size: 18px; bottom: 0 } 

 <ul> <li> <select id="select1" name="select1" multiple> <option>Item 1</option> <option>Item 2</option> <option>Item 3</option> <option>Item 4</option> </select> </li> <li class="relative"> <input type="button" id="add" value="&#8702;" onclick="addOptions( 'select1', 'select2' )" /> <input type="button" id="remove" value="&#8701;" onclick="addOptions( 'select2', 'select1' )" /> </li> <li> <select id="select2" name="select2" multiple></select> </li> </ul>