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

时间:2011-08-10 17:13:19

标签: javascript drop-down-menu mootools

请参阅FIDDLE

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

我无法弄清楚为什么最后的警报不会触发 - 所以任何关于为什么会有很大帮助的输入。

我在警报中撒了一些信息,以便知道我通过javascript获得了多远,但最后几次警报都没有触发。

我是一个完全的javascript白痴。我认为我越了解,我似乎就越不能做到 - 所以对此表示赞赏。

1 个答案:

答案 0 :(得分: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个函数来存储您需要的任何数据。

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