Index

dojo.clone() for FF3/IE6

Hard coded markup of 'SELECT'

<div id="container">
<select class="select_box_1" id="select_box_1">
	<option value="20">1</option>
	<option value="40">2</option>
	<option value="60" selected>3</option>
	<option value="80">4</option>
	<option value="100">5</option>
</select>
<script>
	var cont = dojo.byId('container');
	var first_select = dojo.query('.select_box_1')[0];
	var second_select = dojo.clone(first_select);
	cont.appendChild(second_select);
</script>
</div>
	// Note the problem with SELECTED for the cloned SELECT in IE output.
	// this extra JS statement solves the problem of the dojo.clone() for IE:
	if(dojo.isIE){second_select.selectedIndex = first_select.selectedIndex;}

Dynamically created 'SELECT' and dojo.clone()

<script>
	var cont = dojo.byId('container');
	var sel = document.createElement('select');
	sel.className = 'select_box_1';
	for (var i=1;i<=5;i++ ) {
		var option = document.createElement('option');
		option.text  = i;
		option.value = i*20;
		sel.options.add(option);
		if (i==3) {option.selected = true;}
	}
	cont.appendChild(sel);
	var second_select = dojo.clone(sel);
	// OR var first_select = dojo.query('.select_box_1')[0];
	// var second_select = dojo.clone(first_select);
	cont.appendChild(second_select);
</script>
	// Now this problem happened for the FF too.
	// replace 'if (i==3) {option.selected = true;}' for the:
	if (i==3) {option.defaultSelected=true;} // that actually is used for IE;
	!!! the FF3 start to work but IE?
	// change this statement again for
	if ( i==3 ){if(dojo.isIE){option.selected=true}else{option.defaultSelected=true;}}
	// Still need to work around of the 'Safary', 'Opera' ...
	// And again the extra JS statement for solving the dojo.clone() for IE.
	if(dojo.isIE){second_select.selectedIndex = first_select.selectedIndex;}

The real cloned SELECT