Multi Select Transfer just jQuery
Practicing using jMar's code from
http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html
HTML
<div>
<select multiple id="select1">
<option id="1" value="1">Option 1</option>
<option id="2" value="2">Option 2</option>
<option id="3" value="3">Option 3</option>
<option id="4" value="4">Option 4</option>
</select>
</div>
<div>
<a href="#" id="add">>></a><br/><a href="#" id="remove"><<</a>
</div>
<div>
<select multiple id="select2"></select>
</div>
CSS
a {
border: 1px solid #aaa;
text-decoration: none;
background-color: #fafafa;
color: #123456;
margin: 2px;
clear:both;
}
div {
float:left;
text-align: center;
margin: 10px;
}
select {
width: 100px;
height: 80px;
}
JavaScript
$().ready(function () {
$('#add').click(function () {
var original = $('#select1 option:selected');
var copied = $('#select1 option:selected').clone();
copied.appendTo('#select2');
original.remove();
var selectList = $('#select2 option');
selectList.sort(function (a, b) {
a = a.value;
b = b.value;
return a - b;
});
$('#select2').html(selectList);
});
$('#remove').click(function () {
var original = $('#select2 option:selected');
var copied = $('#select2 option:selected').clone();
copied.appendTo('#select1');
original.remove();
var selectList = $('#select1 option');
selectList.sort(function (a, b) {
a = a.value;
b = b.value;
return a - b;
});
$('#select1').html(selectList);
});
});