Dojo js toolkit: Problem with dynamically filled select
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 开发者_StackOverflow社区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
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.
加载中,请稍侯......
精彩评论