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