This post will not help the C# gurus. Because they are already using this feature different techniques. But I hope this will be helpful for the PHP beginners :) . Now I am going to show you how you can move list items from one list box to another using simple jquery. Using jquery it is very simple than you think. :)
This is the Jquery portion:
Now comes the html portion.
Simple is not it? Copy and paste the code. Run..
This is the Jquery portion:
<script src="jquery-1.6.2.js"></script>
<script>
function move_forward()
{
//taking the selected items of list 1 and concatenating to a variable named forward_variable.
var forward_variable='';
$("#list1 :selected").each(function(){
forward_variable+="<option value='"+$(this).val()+"'>"+$(this).html()+"</option>";
$(this).remove();
});
//Now appending the selected firs list's element to the list 2.
$("#list2").append(forward_variable);
//Sorting the list 2 so that it shows the list alphabetically
sort_element("list2");
}
function move_backward()
{
var backward_variable='';
//taking the selected items of list 2 and concatenating to a variable named backward_variable.
$("#list2 :selected").each(function(){
backward_variable+="<option value='"+$(this).val()+"'>"+$(this).html()+"</option>";
$(this).remove();
});
//Now appending the selected firs list's element to the list 1.
$("#list1").append(backward_variable);
//Sorting the list 2 so that it shows the list alphabetically
sort_element("list1");
}
//Sorting function to sort the elements
function sort_element(id)
{
var select_element = $('#'+id);
var options_element = select_element.children('option').get();
options_element.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(options_element, function(index, items) { select_element.append(items); });
}
</script>
Now comes the html portion.
<select multiple="multiple" name="list1" id="list1" style="width:200px">
<option value="1">Ecstasy</option>
<option value="2">Tanjim</option>
<option value="3">Rex</option>
<option value="4">Artisti</option>
<option value="5">Infinity</option>
</select>
<input type="button" name="forward" id="forward" onclick="move_forward()" value=">>"/>
<input type="button" name="backward" id="backward" onclick="move_backward()" value="<<"/>
<select multiple="multiple" name="list2" id="list2" style="width:200px">
</select>
Simple is not it? Copy and paste the code. Run..
