i have two select box, now what i want is i want to move option from one select box to another via a button

below is my code:

php

<table>
    <tr>
        <td>
        <select  size="5" id="suppliedMovies" name="suppliedMovies">
            <option selected="selected" value="">Select Movie</option>          
            <option value="1">sholay</option>
            <option value="3">Jism</option>
            <option value="4">Rog</option>
            <option value="5">Zeher</option>
            <option value="6">Awarpan</option>
            <option value="7">Paap</option>
            <option value="8">paanch<option>
            <option value="9">no entry</option>
        </select>
        </td>
        <td>
            <input type="button" id="toRight" value="&gt;&gt;"><br>
            <input type="button" id="toLeft" value="&lt;&lt;">
       </td>
       <td>
        <select size="5" id="accquiredMovies" name="accquiredMovies">   
            <option> No item right now</option>
        </select>
       </td>
   </tr>
</table>

Jquery

jQuery(document).ready( function() {

 function displayVals() {
      var myValues = jQuery("#suppliedMovies").val();
      return myValues;
    }
开发者_JS百科
    jQuery('#toRight').click(function(){
    var x=displayVals(); 
    console.log(x);
    var txt=jQuery("#suppliedMovies option[value='"+x+"']").text();
    console.log(txt);
    if(x!=''){
    jQuery('#accquiredMovies').append("<option value='"+x+"' >"+txt+"</option>");
    }           
    });         
});

i m using above jQuery, that is working fine but, i want that

when one item is copy from one select box to another select box, then that item should be disable(or probably delete) from first select box (to prevent duplicate entry). i also want to move item from right to left select box please suggest me optimized jQuery . Thanks.

UPDATE

if i want to use multiple select box on both side? then how do i use that?

more update

if i click on a item on rightselectbox and move it to left selectbox, and go further(post) then on right selectbox, there is nothing selected items?? what i need is on right selectbox, there all items shoud be always selected , otherwise what i need to do? after i move an item from right to left ,i again have to select rest of items on right selectbox and go further

solution for my update part

i used below code, please take a look and suggest me if somebody finds any mistake/error in this. Thanking You

jQuery('form').submit(function() {  
        jQuery('#accquiredMovies option').each(function(i) {  
            jQuery(this).attr("selected", "selected");  
         });  
    }); 

You could use jQuery remove. Like:

$('#suppliedMovies option[value=' + x ']').remove()

..fredrik

EDIT:

You could optimize the function like this:

jQuery(document).ready( function() {
    # Store the jQuery object return by the selector so that you don't need to
    # make a new selector request next time a user press the #toRight
    var suppliedSelect = jQuery('#suppliedMovies');

    jQuery('#toRight').click(function () {
        suppliedSelect.find(':selected').each(function (index, elem) {
            var selectElem = $(elem);
            if (selectElem.val()) {
                selectElem.val.appendTo('#accquiredMovies');
            }
         });
    });
});

    function SelectMoveRows(SS1,SS2)
    {
        var SelID='';
        var SelText='';
        // Move rows from SS1 to SS2 from bottom to top

        for (var i=SS1.children().length - 1; i>=0; i--)
        {
            if (SS1.children()[i].selected == true)
            {

                SelID=SS1.children()[i].value;
                SelText=SS1.children()[i].text;

                SS2.append($("<option/>", {value: SelID, text: SelText}));
                $(SS1.children()[i]).remove();
            }
        }
        SelectSort(SS2);
    }
    function SelectSort(SelList)
{
//  alert("in secod "+(SelList.children().length-1))
    var ID='';
    var Text='';
    for (var x=0; x < SelList.children().length-1; x++)
    {
//       alert(SelList.children()[x].text)
        for (var y=x + 1; y < SelList.children().length; y++)
        {

            if ($(SelList.children()[x]).val() > $(SelList.children()[y]).val())
            {
                // Swap rows
                alert("x "+SelList.children()[x].value +"  y = "+SelList.children()[y].value)
                ID=$(SelList.children()[x]).val();
                Text=$(SelList.children()[x]).text();

                $(SelList.children()[x]).val($(SelList.children()[y]).val());
                $(SelList.children()[x]).text($(SelList.children()[y]).text());

                $(SelList.children()[y]).val(ID);
                $(SelList.children()[y]).text(Text);
//                SelList.children()[x].text= SelList.children()[y].text;

//                SelList.children()[y].value=ID;
//                SelList.children()[y].text=Text;
            }
        }
    }
}

This is also working for moving items from one multi select box to another without duplicating. I wana know how to make order of values same while moving items from one to another select box.

Here's a good example:

HTML:

<form>
<select id="t1available" size=10  multiple><option>Project 1</option><option>Project 2</option><option>Project 4</option></select>
<br />
<input id="t1add" type="button" value=">" />
<input id="t1addAll" type="button" value=">>" />
<input id="t1removeAll"  type="button" value="<<" />
<input id="t1remove" type="button" value="<" />
<br />
<select id="t1published" size=10 multiple><option>Project 3</option></select>
</form>

Jquery:

<script type="text/javascript">
function moveSelectedItems(source, destination){
  var selected = $(source+' option:selected').remove();
  var sorted = $.makeArray($(destination+' option').add(selected)).sort(function(a,b){
    return $(a).text() > $(b).text() ? 1:-1;
  });
  $(destination).empty().append(sorted);
}
</script>

<script type="text/javascript">
$(document).ready(function(){
  $('#t1add').click(function(){
    moveSelectedItems('#t1available', '#t1published');
  });
  $('#t1addAll').click(function(){
    $('#t1available option').attr('selected', 'true');
    moveSelectedItems('#t1available', '#t1published');
  });
  $('#t1remove').click(function(){
    moveSelectedItems('#t1published', '#t1available');
  });
  $('#t1removeAll').click(function(){
    $('#t1published option').attr('selected', 'true');
    moveSelectedItems('#t1published', '#t1available');
  });
});
</script>

This example is entirely from the following article, which, unfortunately for English speakers, is in German: Move selected items between checkboxes.

We can do like this:

$('div.buttons').on('click','#add',function(e){
    e.preventDefault();    
    $("#sourceid option:selected").appendTo("#destinationid");
});