Jquery Html移動選項到另一個框

Question

嗨，你可以幫我把這個jquery功能移動選項移動到另一個框，在左邊框中的文本後點擊按鈕文本將會移到右邊，那麼它將計算這裏的價格是我的代碼的功能正在運行，但有一些按鈕一些錯誤幫我傢伙TNX

jquery.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">     </script> 
<div> 
    <select id='A' name='A' multiple class='fl'> 
     <option value='100'>food1</option> 
     <option value='200'>food2</option> 
     <option value='300'>food3</option> 
     <option value='400'>food4</option> 
    </select> 
     <input type='button' id='ToB' value=' > ' /> 
     <input type='button' id='ToA' value=' < ' /> 
     <select id='B' name='B' multiple class='fr'> 
     </select> 
    <br> 
     <select id='C' name='C' multiple class='f2'> 
      <option value='500'>food5</option> 
      <option value='600'>food6</option> 
      <option value='700'>food7</option> 
      <option value='800'>food8</option> 
     </select> 
     <input type='button' id='ToD' value=' > ' /> 
     <input type='button' id='ToC' value=' < ' /> 
     <select id='D' name='D' multiple class='fr1'> 

     </select> 
</div> 

<fieldset> 
    <legend> 
    <p align="left" class=""><b>Reservation Total Price:</b> &nbsp;&nbsp;&nbsp; 
    </legend> 
    <div id="total"></div> 
</fieldset> 
<script> 
    $('[id^=\"ToB\"]').click(function (e) { 
       (this).prev('select').find('option:selected').remove().appendTo($(this).nextAll('select')); 
     compute(); 
      }); 

     $('[id^=\"ToA\"]').click(function (e) { 
       $(this).next('select').find('option:selected').remove().appendTo($(this).prevAll('select')); 
     compute() 
     }); 

     $('[id^=\"ToD\"]').click(function (e) { 

      $(this).prev('select').find('option:selected').remove().appendTo($(this).nextAll('select')); 
     compute(); 
     }); 

      $('[id^=\"ToC\"]').click(function (e) { 
      $(this).next('select').find('option:selected').remove().appendTo($(this).prevAll('select')); 
      compute() 
     }); 


    </script> 

    <script> 
    function compute(){ 
     var total = 0; 
     $(".fr").each(function(){ 
    $(this).children(' option').each(function(){     
    total += parseInt($(this).val()); 
}); 
    })   
$('#total').html('&#x20b1;' + total); 
    } 
    </script> 

Answer 1

它似乎對我的工作沒有任何變化：http://cssdeck.com/labs/mlq7c8f4。

編輯：需要

變化：

線33：

$('[id^=\"ToB\"]').click(function(e) { 
    $(this).prev('select').find('option:selected').remove().appendTo($(this).nextAll('#B')); // replace "select" with "#B" 
    compute(); 
}); 
$('[id^=\"ToA\"]').click(function(e) { 
    $(this).next('select').find('option:selected').remove().appendTo($(this).prevAll('#A')); // replace "select" with "#A" 
    compute() 
}); 
$('[id^=\"ToD\"]').click(function(e) { 
    $(this).prev('select').find('option:selected').remove().appendTo($(this).nextAll('#D')); // replace "select" with "#D" 
    compute(); 
}); 
$('[id^=\"ToC\"]').click(function(e) { 
    $(this).next('select').find('option:selected').remove().appendTo($(this).prevAll('#C')) // replace "select" with "#C"; 
    compute() 
});