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

您的问题是更改事件将在您的select-multi事件之前触发。此外，您设置项目的方式，您甚至不需要更改事件，您的select-multi事件重置所选选项（这是更改）并在上一个项目时重新应用它并在每次点击时触发。只需将您的计数移动到设置select-multi click事件的位置即可。请参阅此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函数以获得所需的结果

2 个答案: