두 개의 JQuery 함수를 병합하여 원하는 결과 얻기

Question

단일 다중 드롭 다운 상자에는 두 가지 기능이 있습니다. 첫 번째 기능은 single click 또는 ctrl+click으로 여러 옵션을 선택하는 것이고 두 번째 기능은 나열된 모든 옵션의 합계를 얻기 위해 data 속성을 합하는 것입니다. 몇 번 시도해보고 끝내고 원하는 결과를 얻을 수 없었습니다.

https://jsfiddle.net/w4tnv3zm/ 데모에서 한 번의 클릭으로 또는 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

문제는 change 이벤트가 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() {  

});