dijit.form.Select的addOption()函数是一个很好的功能,方便我们用编程的方法动态添加<option>结点到Select中。
不过如果遇到下面这样的问题,希望不要重走本人的老路,花冤枉时间。(Dojo 1.7.3)
HTML代码
<table>
<tr>
<td><label for="cb1">Check Box 1:</label>
</td>
<td><select id="cb1"
name="cb1" style="width: 100px"
data-dojo-type="dijit.form.Select">
</select></td>
</tr>
<tr>
<td><label for="cb2">Check Box 2:</label>
</td>
<td><select id="cb2"
name="cb2" style="width: 100px"
data-dojo-type="dijit.form.Select">
</select></td>
</tr>
</table>
JS代码
require(
[ "dojo/ready", "dojo/_base/xhr", "dojo/json", "dijit/registry", "dojo/_base/array" ],
function(ready, xhr, JSON, registry, array) {
ready(function() {
var cb1 = registry.byId("cb1");
var cb2 = registry.byId("cb2");
var options = [
{
value: "op1",
label: "option 1"
},{
value: "op2",
label: "option 2"
}
];
array.forEach(options, function(option){
cb1.addOption(option);
cb2.addOption(option);
});
cb1.set("value", "op1");
cb2.set("value", "op2");
});
});
从JS代码来看,cb1当前选中的是op1,cb2当前选中的是op2。但是如果用cb1.get(“value”)取得当前选中的值,得到的却是”op2”!
问题就出在同一个options变量被同时赋给了cb1和cb2,这样做似乎导致它们的option有了关联。
改成下面这种实现方法就可以避免这个问题了:
JS代码
require(
[ "dojo/ready", "dojo/_base/xhr", "dojo/json", "dijit/registry", "dojo/_base/array" ],
function(ready, xhr, JSON, registry, array) {
ready(function() {
var cb1 = registry.byId("cb1");
var cb2 = registry.byId("cb2");
var options1 = [
{
value: "op1",
label: "option 1"
},{
value: "op2",
label: "option 2"
}
];
var options2 = [
{
value: "op1",
label: "option 1"
},{
value: "op2",
label: "option 2"
}
];
array.forEach(options1, function(option){
cb1.addOption(option);
});
array.forEach(options2, function(option){
cb2.addOption(option);
});
cb1.set("value", "op1");
cb2.set("value", "op2");
});
});
有兴趣的可以追溯一下dijit.form.Select的源码。