Mootools - 需要编辑下拉列表的名称才能获取值

Question

请参阅 FIDDLE

尝试在第三个下拉列表后触发警报，但他们不会。 我在表单中使用这 3 个下拉菜单。第一个和第二个下拉列表适当地提交了它们的值 - 第三个下拉列表没有 - 因为它没有将正确的名称应用于下拉列表。

我不明白为什么最后一个警报不会触发 - 因此任何有关原因的输入都会有很大帮助。

我撒了一些警报，这样我就知道我已经完成了 javascript 的工作，但最后几个警报没有触发。

我是一个彻头彻尾的 JavaScript 白痴。我认为我理解得越多，我似乎能做的就越少——所以感谢您的帮助。

Answer 1

如果您的目标是最终在第 3 级的选择上触发事件，请像这样简化：

(function() {
    var level1 = document.getElements("div.style-sub-1"), level2 = document.getElements("div.style-sub-2");
    var beer = document.id("beerStyle");

    beer.addEvent("change", function() {
        level1.setStyle("display", "none");
        level2.setStyle("display", "none");

        var val = this.get("value");
        if (!val.length)
            return;

        document.id(this.get("value")).setStyle("display", "block");
    });

    // delegate the other selects
    $(document.body);
    document.body.addEvents({
        "change:relay(div.style-sub-1 select)": function() {
            // reset level 2
            level2.setStyle("display", "none");
            var val = this.get("value");

            if (!val.length)
                return;

            var target = document.id(val);
            if (target)
                target.setStyle("display", "block");        
        },
        "change:relay(div.style-sub-2 select)": function() {
            alert("You chose: " + this.get("value"));
        }
    });

})();

问题是 - 如果第 3 级只有 1 个选择，这不会触发更改 - 所以您确实应该保持状态您所知道的最后一个好的面包屑，例如混合面包屑。

http://jsfiddle.net/dimitar/mxaB5/2/

通过每个事件处理程序选择委托的类型。我希望它能给你一些想法 - 你最终可以只使用 2 个函数来存储你需要的任何数据。

你的问题的一部分是第二级下拉菜单可以引用在 dom 中没有以 div 和 select 形式表示的值。