合并两个 JQuery 函数以获得所需的结果

Question

我有两个用于单个多个下拉框的函数。第一个功能是 select 多个选项，即使 single click 或 ctrl+click 也是如此，我的第二个功能是总结 data 属性以获得所有列出的选项的总数。我已经完成了几次尝试，但未能获得我想要的结果。

根据 https://jsfiddle.net/w4tnv3zm/ 演示，单击或什至按住 ctrl 单击 select 多个选项，data attribute 的总和应该 work/display 在 divid.

<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

您的问题是更改事件将在您的 select-multi 事件之前触发。此外，您设置项目的方式甚至不需要更改事件，您的 select-multi 事件会重置 selected 选项（即更改）并在以下时间重新应用它上一个项目并在每次点击时触发。只需将您的计数移动到您设置 select- 多次点击事件的位置。看到这个 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() {      

});

Answer 2

这是另一种方法。

$('#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/

合并两个 JQuery 函数以获得所需的结果

Merging two JQuery functions to get desired results

jquery

multiple-select