2つのJQuery関数をマージして目的の結果を得る

Question

1つのドロップダウンボックスに2つの関数があります。最初の機能はsingle clickまたはctrl+clickで複数のオプションを選択することです.2番目の機能はdata属性を合計して、リストされたすべてのオプションの合計を取得することです。私はいくつかの試行で試してやって、私の希望の結果を得ることができませんでした。

https://jsfiddle.net/w4tnv3zm/デモでは、1回のクリックで、またはCtrlキーを押しながらでも複数のオプションを選択すると、data attributeの合計がdiv idに表示されます。

<select class="form-control select-multi" name="grp[]" id="grp" multiple="multiple" required=""> 
    <option value="1" data-cntotal="1100">1 group (1100 Nos.)</option> 
    <option value="2" data-cntotal="857">2 group (857 Nos.)</option> 
    <option value="3" data-cntotal="998">3 group (998 Nos.)</option> 
    <option value="4" data-cntotal="823">4 group (823 Nos.)</option> 
    <option value="5" data-cntotal="959">5 group (959 Nos.)</option> 
</select> 
<span id="total_box" class='help-block text-purple text-bold'></span><br><span id="mmcount" class='help-block text-blue text-bold'></span> 

私のJSコード

$('.select-multi').each(function() { 
    var select = $(this), 
     values = {}; 
    $('option', select).each(function(i, option) { 
     values[option.value] = option.selected; 
    }).click(function(event) { 
     values[this.value] = !values[this.value]; 
     $('option', select).each(function(i, option) { 
      option.selected = values[option.value]; 
     }); 
     var tcount = $(".select-multi :selected").length; 
     $("#mmcount").text(tcount + " total group(s) selected.") 
    }); 
}); 
$(document).ready(function() { 
    $("#grp").change(function() { 
     $("#total_box").empty(); 
     var sum = 0, 
      price; 
     $(this).find("option:selected").each(function() { 
      if ($(this).attr("data-cntotal")) { 
       price = $(this).data("cntotal"); 
       sum += price; 
      } 
     }); 
     $("#total_box").text("Total Mobile Numbers selected: " + sum); 
    }); 
}); 

誰も助けてくださいもらえますか？

Answer 1

これは別の方法です。

$('#grp option').mousedown(function(e) { 
    e.preventDefault(); 
    $("#total_box").empty(); 
    var sum = 0, tcount = 0, price; 
    $(this).prop('selected', $(this).prop('selected') ? false : true); 
    $('#grp').find("option:selected").each(function() { 
      //console.log($(this).val()) 
     price = $(this).data("cntotal"); 
     sum += price; 
     tcount++; 
    }); 
    $("#total_box").text("Total Mobile Numbers selected: " +sum); 
    $("#mmcount").text(tcount + " total group(s) selected.") 
}) 

JSfiddle - https://jsfiddle.net/dhananjaymane11/0oL9xoqj/

Answer 2

問題は、変更イベントがselect-multiイベントの前にトリガーされることです。また、プロジェクトを設定する方法でも、変更イベントは必要ありません。また、select-multiイベントは選択されたオプション（変更）をリセットし、前のアイテムが再度クリックされるたびに適用され、クリックごとにトリガされます。選択マルチクリックイベントを設定した場所でカウントを移動するだけです。これを参照してくださいhttps://jsfiddle.net/w4tnv3zm/4/

$('.select-multi').each(function(){ 

    var select = $(this), values = {};  
    $('option',select).each(function(i, option){ 
     values[option.value] = option.selected;   
    }).click(function(event){   
     values[this.value] = !values[this.value]; 
     $('option',select).each(function(i, option){    
      option.selected = values[option.value];   
     }); 
     var tcount = $(".select-multi :selected").length; 
     $("#mmcount").text(tcount + " total group(s) selected.")   
     var sum=0 
     $('option:selected').each(function(i,d){ 
      sum += $(d).data("cntotal") 
     }) 
     $("#total_box").text("Total Mobile Numbers selected: " +sum); 
    }); 
}); 
$(document).ready(function() {  

});