jquery selected options from one to another -

in following multiple select box when clicked on change button want populate selected items in id="p_prod" display in id="s_prod" , remove them in p_prod , on click of revert want them removed s_prod , repopulate them in p_prod in same order earlier ..how this

<select size="10"  multiple="multiple" id="p_prod">  <option value="1">prod1</option>                                     <option value="2">prod2</option>  <option value="3">prod3</option>  <option value="4">prod4</option>  </select>   <select mulitple="multiple" id="s_prod">  </select> <input type="button" id="change" value="change" onclick="val();"/> <input type="button" id="revert" value="revert" onclick="val();"/>  function val() {   $('#p_prod option:selected').removeattr('selected'); } 

you can selcted options using option:selected , append other select using appendto(). remove options first select automatically.

live demo

$('#p_prod option:selected').appendto('#s_prod'); 

to revert need store indexes, , need thing this,

live demo

$('#change').click(function () {     $('#p_prod option:selected').each(function () {         $(this).data('previndex', $(this).index());         $(this).appendto('#s_prod');     }); });  $('#revert').click(function () {         debugger     $('#s_prod option').each(function () {                 currentoptindex =  $(this).data('previndex');         if(currentoptindex > 0)            $('#p_prod option').eq(currentoptindex).after(this);                       else             $('#p_prod').prepend(this);                   }); });