關於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的源碼。