Question

我有两个多选 viz 。 let effectAudioAction = SKAction.playSoundFileNamed("electricshockLow.mp3", waitForCompletion: false) let changeVolumeAction = SKAction.changeVolume(to: 0.3, duration: 0.3) let effectAudioGroup = SKAction.group([effectAudioAction,changeVolumeAction]) node.run(effectAudioGroup)和mySelectNumberTest1。我想要做的是能够在第一个下拉列表中选择项目，当我单击复选框/按钮或任何将触发事件的控件时，它应该从mySelectNumberTest2获取选项并将其填充到{{ 1}}。

我已关注此链接：Get selected value in dropdown list using JavaScript?它是我问题的部分解决方案。唯一缺少的是，如果您在mySelectNumberTest1中选择多个项目，则只会将第一个项目填入mySelectNumberTest2。

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

mySelectNumberTest1

这种方法也存在一些问题，因为它连接了文本。我尝试了.split（）函数，但仍然没有给出我想要的结果。我希望mySelectNumberTest2上每行中的所选项目。

这个库http://quasipartikel.at/multiselect/完全符合我的要求。我在一个Angular JS项目中工作，当我尝试在我的<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); }页面中包含jquery脚本时，它会导致异常行为并且也会破坏页面的样式。

因此，如果我在mySelectNumberTest2中选择index.html和1，则应在3中将其填入两行，而不是mySelectNumberTest1。

如果可以通过拖放实现实现这一点，我也会很高兴。

Answer 1

只需这样做：

＆＃13;

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

在多个选择之间移动项目

1 个答案: