关于dijit.form.Select中addOption()的一点注意事项

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的源码。