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
JavaScript check if first string contains all characters of second string
Highlight and get the details of table row on click using JavaScript
How to get selected text from a select box using jQuery?
How to scroll page to 1000px from top on page load using jQuery?
JavaScript sort multi dimensional array on specific columns
jQuery show input text inside div after on click event