JavaScript/jQuery Dropdownlist Change Event With Closure Not Working

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 dr

Solution 1:

Problem

You are returning function from self-executing anonymous function, but do not assing the returned value anywhere.

Simplifying your code, it looks like that:

/* 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 */

Solution

Generally your code is very unreadable, you should improve it for your own good (and to avoid such problems). The problem above can be quickly fixed by passing parameter to the function that returns a function (but did not call it). Solution is here: jsfiddle.net/scxNp/13/

Answer : explanation

What I did was simple - I spotted that you pass this to the function from the first (working) example, but you do not even execute this function in the second (incorrect) example. The solution, simplified, looks like 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 */

Hope this makes sense :)

Ps. I have also updated my first code snippet so the changes should be easily spotted :)

Ps.2. This is only a quickfix and - as mentioned above - there is a lot to be made to make your code readable. Also every function works as closure, so do not overuse self-executing (function(){/* your code */})(); that you do not assign to anything (it is useful, but one time for one script should be enough). Instead use the existing closures.

Solution 2:

I believe this should work:

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

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

Solution 3:

how about this?

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>

script:

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