[英]Tabulator moveable rows -- how to select / move multiple items at one time
[英]Move items across between multiple select
我有兩個多重選擇, 即 。 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
填充它。
如果這可以通過拖放實現來實現,我也將很高興。
只需執行以下操作:
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="⇾" onclick="addOptions( 'select1', 'select2' )" /> <input type="button" id="remove" value="⇽" onclick="addOptions( 'select2', 'select1' )" /> </li> <li> <select id="select2" name="select2" multiple></select> </li> </ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.