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
jQuery Show or Hide text on button click
What's the difference between let and var?
How to change text color on click using JavaScript?
jQuery check if an element is visible or hidden
How can I redirect the user from one page to another using jQuery or pure JavaScript?
Generate random password for form field on click using JavaScript