<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;}
<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;}