Javascript Jquery Html将选项移动到另一个框

大家好，你能帮我用这个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>

---

它似乎对我有效，没有任何变化：

编辑：

所需更改：

第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()
});

---

你能说清楚一点吗？我不知道发生了什么事here@cgatian好的，tnx供您评论：这是JSFIDLE中的示例，我不知道那个提琴里发生了什么。@David，你们好，ph？这是一个清晰的示例，但不是我想要的功能：@kyledavide谢谢你的评论是的，它的工作原理是这样的，但它在功能上有一些错误，不能很好地工作。例如，在第一个框中，当你点击左边的函数时，它会向右移动，但在顶部和底部的框中，我需要将其编辑为仅在顶部box@user3375360好的，我对cssdeck上的代码进行了调整，并使其正常工作。我为所有更改留下了注释。