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

发布于 2024-10-10 06:36:59 字数 1670 浏览 1 评论 0原文

我在 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 （与另一个选择关联）或 onclick （与按钮关联）上填充。使用标准 HTML 选择项目一切正常。我可以做什么来解决这个问题？

谢谢

原文

I'm having some issues with dijit.form.Select items.

In a page i have two of these items: one is filled while the html page is being loaded and the other one is filled depending on which option the user has selected on the first one.

Here's an example of what I'm talking about (now I'm keeping the code simple, but in the real version I've included all the necessary dojo modules and libraries in the head section):

<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>

When I load the page in my browser, menu selA contains the options aaa and bbb. But selB, whenether I select aaa or bbb in selA remains empty. In javascript error console i can read: dojo.byId [undefined] is not a function. I've spent a lot of time trying to make this work (tryied a lot of alternatives) but had no luck. I can only manage to fill dojo select on onload events, not on onchange (associated with another select) or onclick (associated to a button). With standard HTML select items everything works ok instead.
What can I do in order to fix this issue?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

转瞬即逝 2024-10-17 06:36:59

这里或多或少是您的工作示例

<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 Select 的代码移至
dojo.addOnLoad。这是必需的，
因为以前当你受审时
获取 selA 小部件它并不完全
创建并且 dojo 无法返回它的
小部件还没有。 Dojo 创建它的小部件
页面完全加载后。后
它创造了它所称的一切
addOnLoad 函数。所以你应该
把你所有的东西都放在这个函数中
初始化的东西。
Select 是一种 dijit 类型的小部件，因此
应该使用 dijit.byId 而不是
dojo.byId。

Here is more or less your working example

<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>

What I have changed:

moved code that setup selA Select to
dojo.addOnLoad. This is required,
because previously when you were tried
to get selA widget it wasn't fully
created and dojo couldn't return its
widget yet. Dojo create its widgets
after page is fully loaded. After
it creates everything it calls
addOnLoad function. So you should
place in this function all your
initialization stuff.
Select is a dijit kind of widget so
dijit.byId should be used instead of
dojo.byId.