Javascript清除多选框

Question

I've 2 multiselect boxes one is with values and the second one is empty. When I choose option from the left and click arrow button it takes the value to the second one. My question is how can I clear it by a function in button and restore these values I mean get back the value to the first one and clear the second one. I tried like that but it does not work.

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

Answer 1

Here is a simple add/remove model using a click listener and two buttons.

In the example we look at the selectedOptions collection and move them.

 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>