While working with select boxes somewhere you need to use multiple selections and selecting multiple items from a bigger list is not user friendly. Here the idea is to make two select boxes and move items from one box to another. So it becomes more user friendly and looks good when it comes to UX.
It is quite easy to implement this with jquery. Just remove the item from one box and append to another.
You can move all items at once or you can move only selected items.
The above two lines of jquery does all the trick. Here is the full script. The jquery, css and the html.
See the demo of the code.
It is quite easy to implement this with jquery. Just remove the item from one box and append to another.
You can move all items at once or you can move only selected items.
jQuery to move selected list box items from one box to another
$('#from option:selected').remove().appendTo('#to');
jQuery to move all list box items from one box to another
$('#from option').remove().appendTo('#to');
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Move from one select box to another</title>
<style type="text/css">
select {
width: 200px;
float: left;
}
.controls {
width: 40px;
float: left;
margin: 10px;
}
.controls a {
background-color: #222222;
border-radius: 4px;
border: 2px solid #000;
color: #ffffff;
padding: 2px;
font-size: 14px;
text-decoration: none;
display: inline-block;
text-align: center;
margin: 5px;
width: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script>
function moveAll(from, to) {
$('#'+from+' option').remove().appendTo('#'+to);
}
function moveSelected(from, to) {
$('#'+from+' option:selected').remove().appendTo('#'+to);
}
</script>
</head>
<body>
<select multiple size="10" id="from">
<option value="html">Html</option>
<option value="css">Css</option>
<option value="google">Google</option>
<option value="javascript">Javascript</option>
<option value="jquery">Jquery</option>
<option value="regex">Regex</option>
<option value="php">Php</option>
<option value="mysql">Mysql</option>
<option value="xml">Xml</option>
<option value="json">Json</option>
</select>
<div class="controls">
<a href="javascript:moveAll('from', 'to')">>></a>
<a href="javascript:moveSelected('from', 'to')">></a>
<a href="javascript:moveSelected('to', 'from')"><</a>
<a href="javascript:moveAll('to', 'from')" href="#"><<</a> </div>
<select multiple id="to" size="10">
</select>
</body>
</html>
Posting Komentar