Now we are going to learn how to move multi select dropdown options using up and down buttons. I used jquery and bootstrap technologies. Bootstrap is used for only designing the select dropdown values, up/down buttons and adding icons. If you don't want design you can remove it and we can also use javascript to create these functionality but jquery makes little bit easy. Lets see the example and video demo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Multiple Select Dropdown Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/
css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/
bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="form-group" style="padding-top:150px">
<label class="control-label col-sm-2">Number List :</label>
<div class="col-sm-5">
<select multiple class="form-control input-sm" name="reorderNumbers"
id="reorderNumbers" style="height:200px">
<option value="1" >one</option>
<option value="2" >two</option>
<option value="3" >three</option>
<option value="4" >four</option>
<option value="5" >five</option>
<option value="6" >six</option>
</select>
</div>
</div>
<div style="margin-bottom:20px;margin-top:50px">
<button type="button" class="btn btn-default reorder" id="Up">
<span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
<div>
<button type="button" class="btn btn-default reorder" id="Down">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
</div>
<script>
$(document).ready(function(){
$('.reorder').click(function(){
var $options = $('#reorderNumbers option:selected'),
$this = $(this);
if($options.length){
($this.attr("id") == 'Up') ? $options.first().prev().before($options)
: $options.last().next().after($options);
}
});
});
</script>
</body>
</html>
0 comments:
Post a Comment