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
Highlight and get the details of table row on click using JavaScript
How to scroll page to 1000px from top on page load using jQuery?
How to check if an element or HTML tag exists using JavaScript?
How to declare multiple variables in one statement in Javascript?
Get largest number from each sub-arrays
jQuery simple form with name and email validations