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

我有两个函数用于单个多个下拉框。第一个功能是选择多个选项，即使使用

单键单击

或

ctrl+单击

，我的第二个功能是汇总

数据

属性，以获得所有列出选项的总数。我试了好几次，都没能得到我想要的结果

根据演示，单击一次，甚至按住ctrl键单击以选择多个选项，

数据属性

的总和应在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>

---

有人能帮忙吗？

您的问题是更改事件将在选择多事件之前触发。此外，按照您设置项目的方式，您甚至不需要更改事件，您的“选择多事件”将重置所选选项（即更改），并在每次单击上一项和触发时重新应用它。只需将计数移动到设置“选择多点单击”事件的位置。看到这个了吗

---

您的问题是更改事件将在选择多事件之前触发。此外，按照您设置项目的方式，您甚至不需要更改事件，您的“选择多事件”将重置所选选项（即更改），并在每次单击上一项和触发时重新应用它。只需将计数移动到设置“选择多点单击”事件的位置。看到这个了吗

---

这是另一种方法

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

这里是另一种方法

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

太棒了！谢谢你的时间和努力来帮助我。谢谢。嗨@chungtinhlakho，在JSFIDLE上，它的工作很好，在我的现场网站上，总和显示为

NaN

，原因可能是什么？确保var sum是var sum=0是的，是的，我只是从JSFIDLE复制粘贴了相同的代码，但无论如何，另一种方法也工作得很好，正如djay发布的一样。所以，现在就开始吧。很抱歉没有接受你的回答。太棒了！谢谢你的时间和努力来帮助我。谢谢。嗨@chungtinhlakho，在JSFIDLE上，它的工作很好，在我的现场网站上，总和显示为

NaN

，原因可能是什么？确保var sum是var sum=0是的，是的，我只是从JSFIDLE复制粘贴了相同的代码，但无论如何，另一种方法也工作得很好，正如djay发布的一样。所以，现在就开始吧。对不起，我没有接受你的回答。。这是完美的工作在我的现场也。谢谢，啊。。这是完美的工作在我的现场也。非常感谢。

$('#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.")
 })