Question

我在使用dijit.form.Select项时遇到了一些问题。

在一个页面中，我有两个这样的项目：一个在加载html页面时填充，另一个填充，具体取决于用户在第一个选择的选项。

这是我正在谈论的一个例子（现在我保持代码简单，但在真实版本中我已经在头部包含了所有必要的dojo模块和库）：

<html> 
        <head> 
                <script type="text/javascript"> 
                        function updateB(val){ 

                                var menu = dojo.byId("selB"); 

                                menu.options.lenght=0; 

                                if(val=="aaa") 
                                        menu.addOption({value: "aa", label: "aa"}); 
                                else 
                                        menu.addOption({value: "bb", label: "bb"}); 
                        } 
                </script> 
        </head> 

        <body> 
                <select id="selA" name="selA" dojoType="dijit.form.Select" style="width: 180px;" onchange="updateB(this.get('value'));"></select> 

                <select id="selB" name="selB" dojoType="dijit.form.Select" style="width: 180px; "></select> 

                <script type="text/javascript"> 
                        var menu = dojo.byId("selA"); 

                        menu.addOption({value: "aaa", label: "aaa"},{value: "bbb", label: "bbb"}); 

                </script> 

        </body> 

</html>

当我在浏览器中加载页面时，菜单selA包含选项aaa和bbb。但是selB，我在selA中选择aaa或bbb仍然是空的。在javascript错误控制台中，我可以读取：dojo.byId [undefined]不是一个函数。我花了很多时间尝试做这项工作（尝试了很多替代方案），但没有运气。我只能设法在onload事件上填充dojo select，而不是onchange（与另一个select相关联）或onclick（与按钮相关联）。使用标准的HTML选择项，一切正常。我该怎么做才能解决这个问题？

由于

Answer 1

这或多或少是你的工作实例

<html> 
    <head> 
            <link href="js/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="js/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>

            <script type="text/javascript"> 
                    dojo.require("dijit.form.Select");
                    function updateB(val){ 
                            var menu = dijit.byId("selB"); 
                            menu.options.lenght=0; 
                            if(val=="aaa") 
                                    menu.addOption({value: "aa", label: "aa"}); 
                            else 
                                    menu.addOption({value: "bb", label: "bb"}); 
                    } 
                    dojo.addOnLoad(function()
                    {
                        var menu = dijit.byId("selA"); 
                        menu.addOption([{value: "aaa", label: "aaa"},{value: "bbb", label: "bbb"}]); 
                    });
            </script> 
    </head> 

    <body> 
            <select id="selA" name="selA" dojoType="dijit.form.Select" style="width: 180px;" onchange="updateB(this.get('value'));"></select> 
            <select id="selB" name="selB" dojoType="dijit.form.Select" style="width: 180px; "></select> 
    </body>

我改变了什么：

移动了设置selA选择的代码 dojo.addOnLoad。这是必需的，因为以前你被审判过获得selA小部件并不完全 created和dojo无法返回它小部件。 Dojo创建它的小部件页面完全加载后。后它创造了它所呼唤的一切 addOnLoad函数。所以你应该把这个功能放在你的所有初始化的东西
选择是一种dijit类型的小部件应该使用dijit.byId代替 dojo.byId。

Dojo js工具包：动态填充选择的问题

1 个答案: