JavaScript / jQuery下拉列表更改事件，关闭不工作 [英] JavaScript/jQuery dropdownlist change event with closure not working

问题描述

在我的示例代码中，我有2个下拉列表（但在实际代码中，数字变化，因为下拉列表是动态创建的）和我想做的是计算有多少下拉列表选择与非零值。我使用closure来跟踪具有非零选定值的下拉列表的总数。我是成功的（请参阅 http://jsfiddle.net/annelagang/scxNp/9/ ）。

In my sample code, I have 2 dropdownlists (but in the real code the number varies because the dropdownlists are created dynamically) and what I wanted to do is to count how many dropdownlists are selected with a non-zero value. I used closure to keep track of the total number of dropdownlists with non-zero selected value. I was successful in doing that (refer to http://jsfiddle.net/annelagang/scxNp/9/).

旧/工作代码

$("select[id*='ComboBox']").each(          
          function() {              
              $(this).change(
                  function() {
                      compute(this);
              });         
      });

    var compute = (function () {
    var total = 11; 
    var selectedDdl = [];

    $("#total").text(total);     
    return function (ctrl) {
         var id = $(ctrl).attr("id");
         var ddlMeal = document.getElementById(id);
         var found = jQuery.inArray(id, selectedDdl);

        if (ddlMeal.options[ddlMeal.selectedIndex].value != 0){
             if(found == -1){
                 total += 1; 
                 selectedDdl.push(id);        
             } 
             else{
                 total = total;
             }
         }
         else {
             total -= 1;
             var valueToRemove = id;
             selectedDdl = $.grep(selectedDdl, function(val) 
                                      { return val != valueToRemove; });
         }        

         $("#total").text(total); 
    };     
}());

注意：真正的代码我可以有两个以上的下拉列表，我只是想测试我的代码将工作的值超过2。

Note: I initialized the total variable with 11 because as I mentioned in the real code I can have more than 2 dropdownlists and I just wanted to test if my code will work on values more than 2.

当我尝试转移闭包里面.change（）事件，它不再有效（请参阅 http://jsfiddle.net/annelagang/scxNp/ 12 / ）有人请帮助我计算这一个吗？我已经做了这些代码几天了，它变得相当令人沮丧。

When I tried transferring the closure inside the .change() event, it no longer works (see http://jsfiddle.net/annelagang/scxNp/12/) Could somebody please help me figure this one out? I've been doing this code for a few days now and it's getting quite frustrating.

新/非工作代码：

$("select[id*='ComboBox']").each(          
          function() {              
              $(this).change(
                  function() {
                     (function () {
                var total = 11; 
                var selectedDdl = [];

                $("#total").text(total);     
                return function (ctrl) {
                     var id = $(ctrl).attr("id");
                     var ddlMeal = document.getElementById(id);
                     var found = jQuery.inArray(id, selectedDdl);

                     if (ddlMeal.options[ddlMeal.selectedIndex].value != 0){
                         if(found == -1){
                             total += 1; 
                             selectedDdl.push(id);        
                         } 
                         else{
                             total = total;
                         }
                     }
                     else {
                         total -= 1;
                         var valueToRemove = id;
                         selectedDdl = $.grep(selectedDdl, function(val) 
                                           { return val != valueToRemove; });
                         }        
                    $("#total").text(total); 
                };     
        }());
          });         
      });

提前感谢。

我也打开更少的messier解决方案。

P.S. I'm also open to less messier solutions.

推荐答案

我认为这应该可以工作：

I believe this should work:

$("select[id*='ComboBox']").change(function() {
    $("#total").text($("select[id*='ComboBox'][value!=0]").length);
});

http://jsfiddle.net/scxNp/15/

这篇关于JavaScript / jQuery下拉列表更改事件，关闭不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！