Move Option items between two drop down list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div.content {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
$(function () {
$('#add').click(function () {
let $options = $('#select1 option:selected');
$options.appendTo("#select2");
});
$('#add_all').click(function () {
let $options = $('#select1 option');
$options.appendTo("#select2");
});
$('#select1').dblclick(function () {
let $option = $('option:selected',this);
$option.appendTo('#select2');
});
$("#remove").click(function () {
let $options = $('#select2 option:selected');
$options.appendTo("#select1");
});
$("#remove_all").click(function () {
let $options = $('#select2 option');
$options.appendTo('#select1');
});
$('#select2').dblclick(function () {
let $option = $('option:selected');
$option.appendTo("#select1");
});
});
</script>
</head>
<body>
<div class="content">
<select multiple="multiple" id="select1" style="width:100px;height:160px;">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
</select>
<div>
<span id="add">Check add to the right</span>
<span id="add_all" >Add all to the right</span>
</div>
</div>
<div class="content">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
</select>
<div>
<span id="remove">Remove</span>
<span id="remove_all">Remove All</span>
</div>
</div>
</body>
</html> Most Helpful This Week
How to change text after click event using JavaScript?
JavaScript example to change image on click
Image Rollover Using onMouseOver and onMouseOut
jQuery show input text inside div after on click event
jQuery Show or Hide text on button click
How to scroll page to 1000px from top on page load using jQuery?