select - 如何使用jquery对所选选项的值求和？

Question

How to sum the selection options in multiple attribute? Any idea what might be the problem?

    $(document).ready(function() { $('#btn-add').click(function(){
    $('#select-from option:selected').each( function() {
            $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });
});
$('#btn-remove').click(function(){
    $('#select-to option:selected').each( function() {
        $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });

});

 $('.select-from option:selected').change(function() {
 var total = 0 ;
  $('.select-to option:selected').each(function() {
      total += parseInt($(this).value());
  });
               $("input[name=class]").value(total);  }); });

I have a multiple selection list options

<select name="selectfrom" id="select-from" multiple size="5">
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
</select>

<a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
<a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>

<select name="selectto" id="select-to" multiple size="5">
</select>    <input type="text" name="class" value="" /> 

Answer 1

Try following code.

$(document).ready(function() { 
  
$('#btn-add').click(function(){
    $('#select-from option:selected').each( function() {
            $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $("input[name='class']").val(parseInt($(this).val()) + parseInt($("input[name='class']").val()));
    });
});
$('#btn-remove').click(function(){
    $('#select-to option:selected').each( function() {
        $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
        $("input[name='class']").val(parseInt($("input[name='class']").val() - parseInt($(this).val())));
    });

});
  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectfrom" id="select-from" multiple size="5">
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
</select>

<a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
<a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>

<select name="selectto" id="select-to" multiple size="5">
</select>    <input type="text" name="class" value="0" />

</div>