Jquery Picklist Example - Jquery
How to do multi selection of items from the list using jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Picklist in jquery is used to select multiple items in a select box. The sample code using jquery to do multi selection of items in a list is given below.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
function moveto()
{
$("#from_box option:selected").each(function(){
$(this).remove();
$('#to_box').append(this);
})
}
function serachval(val)
{
$boool=0;
$("#from_box option").each(function(){
if ($(this).val()==val) {
$boool=1;
}
})
if ($boool==1) {return true;}
else{return false;}
}
function movefrom()
{
$("#to_box option:selected").each(function(){
$val=$(this).val();
$(this).remove();
if ($val==1) {
$('#from_box').prepend(this)
}
else{
$val=$val-1;
if (serachval($val)) {
$(this).insertAfter("#from_box option[value="+$val+"]'");
}
else
{
if(($val<$("#from_box option:eq(0)").val()) )
{
$('#from_box').prepend(this)
}
else
{
$('#from_box').append(this);
}
}
}})
}
function moveall(idd1,idd2)
{
$("#"+idd1+" option").each(function(){
$(this).remove();
$('#'+idd2).append(this);
})
}
</script>
<style>
.select_container{
position: relative;width:40%;display: block;
}
.select_container .panel{
display: block;
cursor: pointer;
float: left;
border: 10px solid #fff;
text-align: left;
text-transform: none;
-webkit-backface-visibility: hidden;
z-index: 1;
}
</style>
<div class='select_container'>
<div class='panel'>
<select name="xxx" id='from_box' multiple="multiple" size=13 class='sbox'>
<option value='1'>Hscripts.com</option>
<option value='2'>statsmonkey.com</option>
<option value='3'>Hibihi.com</option>
<option value='4'>Hiox.com</option>
<option value='5'>Hioxindia.com</option>
<option value='6'>Easycalculation.com</option>
<option value='7'>Tufing.com</option>
<option value='8'>Eluthu.com</option>
<option value='9'>Withfriendship.com</option>
<option value='10'>Svgimages.com</option>
</select>
</div>
<div class='panel' >
<input name="" type="button" class="form_button" value=">>" onclick=moveto()><div class='clear'></div>
<input name="" type="button" class="form_button" value="<<" onclick=movefrom()><div class='clear'></div>
<input name="" type="button" class="form_button" value=">>>" onclick=moveall("from_box","to_box")><div class='clear'></div>
<input name="" type="button" class="form_button" value="<<<" onclick=moveall("to_box","from_box")><div class='clear'></div>
</div>
<div class='panel'>
<select name=yyy multiple id='to_box' class='sbox' size=13 >
</select>
</div>
</div>
