1

私は 2 つ (box1、box2 という名前) の複数の選択されたフォームと 2 つのボタンを設計どおりに追加/削除しています。追加と削除のコードを書きました。ボックス 1 からボックス 2 に a、b、c、d を追加すると、表示されるすべてのアイテムの合計、つまり 10 を取得する必要があります。ボックス 2 から 1 つのアイテムを削除すると、つまり 10 になります。 8.jquery と css を使用して実行したいと考えています。親切に助けていただくか、チュートリアルをお勧めします。私は初心者なので、助けてください。ありがとう :)

私はこれを試しました

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

3 に答える 3

0

私があなたが意味すると思うもののデモ

注：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);
    });

});
于 2013-01-22T09:17:44.030 に答える
0

選択ボックス 2 に追加されたオプションの値をカウントしますか? これが役立つことを意味します。デモ 

<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);
     });   
});
于 2013-01-22T09:20:05.453 に答える
0

私が正しく理解しているかどうかはわかりませんが、要素をコピーする方法を知っているので、（box1とbox2から）それを行った後、jQueryを使用してbox2からすべての要素を取得し、eachメソッドを使用して各の値を解析します<option>。つまり、前に変数を定義した場合。var sum = 0;それに値を追加します。その後、合計を表示できます

-- または、コピー中に値を追加して、オプションの値の合計をすぐに変更することもできます

于 2013-01-22T09:14:50.823 に答える