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>


Ask Questions

Ask Question