TAG
CSS
JavaScript
Result
Run
License
<div class="wrap"> <select id="fruits" size="10" multiple> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="carrot">Carrot</option> <option value="dewberry">Dewberry</option> <option value="eggplant">Eggplant</option> </select> <div><button type="button" id="btn-copy">Copy to item</button></div> <select id="dest" size="10"></select> </div>
.wrap { display: flex; column-gap: 10px; width: 200px; } .wrap > * { flex-grow: 1; } .wrap > div { flex-shrink: 0; flex-grow: 0; flex-basis: 30px; align-self: center; }
document.addEventListener("DOMContentLoaded", () => { let elFruits = document.getElementById("fruits"); let elBtnCopy = document.getElementById("btn-copy"); let elDest = document.getElementById("dest"); elBtnCopy.addEventListener("click", e => { let laElOptions = elFruits.selectedOptions; if(laElOptions.length) { [...laElOptions].forEach(elOption => elDest.append(elOption)); } }); });
Console
expand_less
License
License
by DevDic
Close