Javascript清除多選框

Question

我有2個多選框，一個是帶值的，第二個是空的。 當我從左側選擇選項並單擊箭頭按鈕時，它將值取為第二個。 我的問題是如何通過button的函數清除它並恢復這些值我的意思是將值返回到第一個並清除第二個值。 我試過這樣，但它不起作用。

myOptions.options.length = 0;
myOptions.options[0] = new Option("", "");

Answer 1

這是一個使用點擊監聽器和兩個按鈕的簡單添加/刪除模型。

在示例中，我們查看selectedOptions集合並移動它們。

 const moveFrom = (source) => { let target = (source === 'main') ? '#target' : '#main'; target = document.querySelector(target); Array.from(document.querySelector(`#${source}`).selectedOptions).forEach(opt => { target.add(opt); }); }; document.addEventListener('click', (e) => { if(e.target.matches('#add')) { moveFrom('main'); } if(e.target.matches('#remove')){ moveFrom('target'); } }); 

 div { display: inline-block; } select { display: inline-block; width: 50px; } 

 <div> <select id="main" size="5" multiple="true"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div> <button id="add">Add</button> <button id="remove">remove</button> </div> <div> <select id="target" size="5" multiple="true"> </select> </div>