在多个选择之间移动项目

Question

我有两个多重选择， 即 。 mySelectNumberTest1和mySelectNumberTest2 。 我想要做的是能够在第一个下拉列表中选择项目，并且当我单击复选框/按钮或将触发事件的任何控件时，它应该采用mySelectNumberTest1的选项并将其填充到mySelectNumberTest2 。

我已点击此链接： 使用JavaScript获取下拉列表中的选定值？ 这是我的问题的部分解决方案。 唯一缺少的是，如果您在mySelectNumberTest1选择了多个项目，它将仅获取第一个项目并将其填充到mySelectNumberTest2 。

以下代码仅在将选择中的项目填充到普通输入文本框中时才有效。

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

这种方法在连接文本时也存在一些问题。 我尝试了.split（）函数，但仍然没有得到我想要的结果。 我想要mySelectNumberTest2每一行中的选定项目。

这个库http://quasipartikel.at/multiselect/确实可以实现我想要的功能。 我正在Angular JS项目中工作，当我尝试在我的index.html页面中包含jquery脚本时，它会导致异常行为，并且还会弄乱页面的样式。

因此，如果我在mySelectNumberTest1选择1和3 ，则应该在mySelectNumberTest2中的两行中而不是12填充它。

如果这可以通过拖放实现来实现，我也将很高兴。

Answer 1

只需执行以下操作：

 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>