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 convert string variable in boolean using Regex
Write a function that splits an array into groups the length of size and returns them as a two-dimensional array
Edit the text of label on click using jQuery
Check if a string ends with the given target string
Example to take user input and display on screen using JavaScript
How to change the height of Textarea on click?