JavaScript/jQuery 下拉列表更改事件与关闭不起作用

Question

在我的示例代码中，我有 2 个下拉列表（但在实际代码中，数字会有所不同，因为下拉列表是动态创建的）并且 我想要做的是计算有多少下拉列表被选择为非零值。我使用闭包来跟踪具有非零选定值的下拉列表的总数。我成功地做到了（参考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); 
    };     
}());

注意： 我用 11 初始化了总变量，因为正如我在实际代码中提到的，我可以有超过 2 个下拉列表，我只是想测试我的代码是否可以处理超过 2 的值.

当我尝试在 .change() 事件中传输闭包时，它不再起作用（请参阅http://jsfiddle.net/annelagang/scxNp/12/）有人可以帮我解决这个问题吗？我已经做这个代码几天了，它变得非常令人沮丧。

新的/无效的代码：

$("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); 
                };     
        }());
          });         
      });

提前致谢。

附：我也愿意接受不那么混乱的解决方案。

Answer 1

问题

您正在从自执行匿名函数返回函数，但不要在任何地方赋值返回值。

简化您的代码，如下所示：

/* some code here */
$(this).click(function(){
    /** The following function is executed, returns result, but the
     *  result (a function) is not assigned to anything, nor returned
     */
    (function(){
        /* some code here */
        return function(ctrl){
            /* some code here */
        };
    }());
});
/* some code here */

解决方案

通常您的代码非常不可读，您应该为自己的利益改进它（并避免此类问题）。通过将参数传递给返回函数（但没有调用它）的函数，可以快速解决上述问题。解决方案在这里：jsfiddle.net/scxNp/13/

解决方案：解释

我所做的很简单 - 我发现您将 this 传递给第一个（工作）示例中的函数，但您甚至没有在第二个（不正确的）示例中执行此函数。简化后的解决方案如下所示：

/* some code here */
$(this).click(function(){
    /** Now the result of the following function is also executed, with
     *  parameter passed as in your working example
     */
    (function(){
        /* some code here */
        return function(ctrl){
            /* some code here */
        };
    }())(this);
});
/* some code here */

希望这是有道理的:)

附言。我还更新了我的第一个代码 sn-p，因此应该很容易发现更改：)

Ps.2。这只是一个 quickfix 并且 - 如上所述 - 要使您的代码具有可读性，还有很多工作要做。另外每个函数都作为闭包工作，所以不要过度使用你没有分配给任何东西的自执行(function(){/* your code */})();（它很有用，但一个脚本一次就足够了）。而是使用现有的闭包。

Answer 2

我相信这应该可行：

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

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

Answer 3

这个怎么样？

html:

<select id="ComboBox1" class="howMany">
<option value="0">Value 0</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>

<select id="ComboBox2" class="howMany">
<option value="0">Value 0</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>

<div id="total"></div>

脚本：

$(".howMany").change(
function ()
{
    var nonZero = 0;
    $(".howMany").each(
        function ()
        {
            if ($(this).val() != '0')
                ++nonZero;
        }           
    );
    $("#total").text('There are '+nonZero+' options selected');       
}
);