Question

我有两个（命名为box1，box2）多个选定的表单，两个按钮在设计之间添加/删除.Box1一个将有项目a，b，c，d，e，值为1,2,3,4 ，5。我已经写了添加和删除的代码。现在当我从box1添加a，b，c，d到box2然后我需要得到所有项目的总和，即10，当我从box2中删除一个项目，即b然后它应该显示8.我想使用jquery和css.Kindly帮助我或鼓励任何教程。我只是一个初学者所以帮助我。谢谢你:)）

我试过这个

<script>

$(document).ready(function() {

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

        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $(this).remove();
        });
    });

});
</script>


</head>
<body>
<form>
  <fieldset>

    <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>

  </fieldset>

Answer 1

我不知道我是否理解正确，但是既然你知道如何复制元素，那么在执行它之后（从box1和box2）使用jQuery从box2获取所有元素并使用each方法来解析值每个<option>。如果你在ie之前定义一个变量。 var sum = 0;然后为其添加值。然后，您可以显示总和

- 或者您可以在复制时添加值，并立即更改选项值的总和

Answer 2

DEMO我认为你的意思

注意：我从您的链接中删除了JavaScript:伪协议并添加了e.preventDefault（）

$(document).ready(function() {
    var val1 = 0;

    $('#btn-add').click(function(e){
        e.preventDefault();
        $('#select-from option:selected').each( function() {
           val1 += parseInt($(this).val(),10);
           $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");

        });
        $("#val1").html(val1);
    });
    $('#btn-remove').click(function(e){
        e.preventDefault();
        $('#select-to option:selected').each( function() {
           val1 -= parseInt($(this).val(),10);                
            $(this).remove();
        });
        $("#val1").html(val1);
    });

});

Answer 3

您想要计算选择框中添加的选项的值2意味着这将对您有所帮助。 DEmo

<a href="JavaScript:void(0);" id="btn-count">&laquo; Count</a>  

$(document).ready(function() {

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

        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $(this).remove();
        });
    });


    $('#btn-count').click(function(){
       var a =0;
         $('#select-to option').each( function() {
            a = a+ parseInt($(this).val());           
         });
         alert(a);
     });   
});

需要使用jquery添加所选项目

3 个答案: