jquery bind onchange to 3 select tags, ajax source

Question

Ok, Here's what's suppose to happen:
I have 3 select tags,
when you choose an option in the first one,
the second one populates with results based on the first,
when you choose an option in the second one,
the third one populates with results based on the second.

Here's what actually happens: When you select an option in the first select tag, the third one tries to populate with results before the second one, here's my code (I simplified the code for demo reasons): http://jsfiddle.net/snoapps/cSGBM/1/

html:

<select id="chooser1" data-bind-onload="true"></select>
<select id="chooser2" data-bind-onload="false" data-bind-target="#chooser1"></select>
<select id="chooser3" data-bind-onload="false" data-bind-target="#chooser2"></select>

javascript:

$(document).ready(function() {
$("select[data-bind-onload]").each(function() {
        bindonload = $(this).data("bind-onload");
        // The first chooser loads automatically
        if (bindonload === true) {
            $bind = $(this);
            // This is just to fill it with test data
            for (i=0; i<5; i++) {
                $op = $("<option></option>");
                $op.val(i);
                $op.html("select "+i);
                $bind.append($op);
            }
        } else {
            // This is where I bind the 2nd and 3rd select's to their previous select onchanges
            $sel = $(this);
            bt = $(this).data("bind-target");
            if (bt !== undefined) {
                $("select"+bt).on("change",function() {
                    $val = $(this).val();
                    // Again, this would normally be ajax, but test data is given for demo purposes
                    for (i=0; i<5; i++) {
                        $op = $("<option></option>");
                        $op.val(i);
                        $op.html($val+" select "+i);
                        $sel.append($op);
                    }
                });
            } else {
                console.error("Invalid binder construction");
            }
        }
    });
});

The second tag should be populating with data before the third one does, I'm thinking maybe the third select overrides the second one's bind function somehow?

Answer 1

This appears to be somewhat of a scope issue.

See this updated JSFiddle

The problem is that you're declaring $sel, and binding to it, but then redefine $sel later so the bind is choosing the last one. Use this instead:

var $sel = $(this);

If you had 5 selects, the last one would change when the first one changed and the middle 3 would be ignored. by using var $sel you are essentially making a new variable for each select, instead of 1 that you reassign.

This is caused by the fact that $sel = 1 resets the same $sel variable to a new value, so all previous references are "updated", by using var $sel = 1 you are creating another instance of that variable.

There is probably a better way of handling this, but that will fix your current code.