jquery绑定onchange到3个选择标签，ajax源答案

【问题标题】：jquery bind onchange to 3 select tags, ajax sourcejquery绑定onchange到3个选择标签，ajax源
【发布时间】：2014-06-26 23:14:03
【问题描述】：

好的，假设会发生以下情况：
我有 3 个选择标签，
当您在第一个选项中选择一个选项时，
第二个填充基于第一个的结果，
当您在第二个选项中选择一个选项时，
第三个填充基于第二个的结果。

以下是实际发生的情况：当您在第一个选择标记中选择一个选项时，第三个尝试在第二个之前填充结果，这是我的代码（出于演示原因，我简化了代码）：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");
            }
        }
    });
});

第二个标签应该在第三个之前填充数据，我在想第三个选择可能会以某种方式覆盖第二个的绑定函数？

【问题讨论】：

标签： javascript jquery html bind onchange

【解决方案1】：

这似乎是一个范围问题。

看到这个updated JSFiddle

问题是你声明了$sel，并绑定到它，但是稍后重新定义$sel，所以绑定选择了最后一个。改用这个：

var $sel = $(this);

如果您有 5 个选择，则当第一个更改时，最后一个会更改，而中间的 3 个将被忽略。通过使用var $sel，您实际上是在为每个选择创建一个新变量，而不是您重新分配的 1。

这是因为 $sel = 1 将相同的 $sel 变量重置为新值，因此所有之前的引用都被“更新”了，通过使用 var $sel = 1 您正在创建该变量的另一个实例。

可能有更好的方法来处理这个问题，但这会修复你当前的代码。

【讨论】：