Jump Between Combobox - Jquery
How to jumb between combobox in jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
This jquery code allows you to move multiple items from one combobox to another. You can also switch between two comboboxes. The Code for jump between combobox is given below.
<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>
<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>
<style>
.select_container{position: relative;width:40%; display: block;}
.select_container:before,
.select_container:after {content:"";display:table;}
.select_container:after {clear:both;}
.select_container .panel{
display: block;cursor: pointer;
float: left;border: 10px solid #fff;
text-align: left;text-transform: none; z-index: 1;
}
</style>
