[RESOLVED] Setting innerHTML not working in IE
I have the following code in the head section of my page.
Code:
<script language="JavaScript">
<!--
function assettype_clicked(){
//alert(document.forms['frmAdd'].elements['assettype'].value);
var selectedType=document.forms['frmAdd'].elements['assettype'].value;
var availableMakes;
if(selectedType == 6){//switch
//7 Cisco, 8 HP
availableMakes = "<option value='1'>Unknown</option>" +
"<option value='7'>Cisco</option>" +
"<option value='8'>HP</option>";
}else if(selectedType == 5){//docking station
//5,Lenovo
availableMakes = "<option value='1'>Unknown</option>" +
"<option value='5'>Lenovo</option>";
}else if(selectedType == 4){//monitor
//4,Lenovo
availableMakes = "<option value='1'>Unknown</option>" +
"<option value='4'>Lenovo</option>";
}else if(selectedType == 3){//laptop
//3,Lenovo 6,Dell
availableMakes = "<option value='1'>Unknown</option>" +
"<option value='3'>Lenovo</option>" +
"<option value='6'>Dell</option>";
}else if(selectedType == 2){//desktop
//2 Lenovo
availableMakes = "<option value='1'>Unknown</option>" +
"<option value='2'>Lenovo</option>";
}else{
//1,unk
availableMakes = "<option value='1'>Unknown</option>";
}
var assetmakeselect=document.getElementById("assetmake");
assetmakeselect.innerHTML=availableMakes;
}
//-->
</script>
If using Chrome or Firefox, the code works fine. When certain types are chosen, corresponding makes are populated. (Both fields are <select>s )
If I press F12 in IE, it appears as if the "assetmake" select is not being populated with the html tags. For example, I clicked on "Laptop Computer" and IE is reporting that "assetmake" is filled with just "UnknownLenovoDell", yet doing the same in Chrome returns
"<option value="1">Unknown</option><option value="3">Lenovo</option><option value="6">Dell</option>"
which is what it's supposed to be.
Does innerHTML just not work in IE, or is there something I'm missing?
Re: Setting innerHTML not working in IE
Yes, innerHTML can be wonky in IE and usually isn't a good choice for cross-browser compatibility. Here's some script that demonstrates adding and removing options which could be adapted for your purpose.
Re: Setting innerHTML not working in IE
Thanks, I've modified my original script. Pasting in case someone from the future searches and comes across this post.
Code:
<script type="text/javascript">
<!--
function remove_all_children_from(EltID){
var cell = document.getElementById(EltID);
if (cell.hasChildNodes()){
while (cell.childNodes.length >=1){
cell.removeChild(cell.firstChild);
}
}
}
function add_opt_to_sel(SelId,OpText,OpValue){
var selecthandle=document.getElementById(SelId);
var elOptNew = document.createElement('option');
elOptNew.text = OpText;
elOptNew.value = OpValue;
try {
selecthandle.add(elOptNew,null); //Standards Compliant (not IE)
}
catch(ex) {
selecthandle.add(elOptNew); //IE Only
}
}
function assettype_clicked(){
var selectedType=document.forms['frmAdd'].elements['assettype'].value;
var assetmakeselect=document.getElementById("assetmake");
remove_all_children_from("assetmake");
if(selectedType == 6){//TODO: make this a switch
//7 Cisco, 8 HP
add_opt_to_sel("assetmake","Unknown",1);
add_opt_to_sel("assetmake","Cisco",7);
add_opt_to_sel("assetmake","HP",8);
}else if(selectedType == 5){//docking station
//5,Lenovo
add_opt_to_sel("assetmake","Unknown",1);
add_opt_to_sel("assetmake","Lenovo",5);
}else if(selectedType == 4){//monitor
//4,Lenovo
add_opt_to_sel("assetmake","Unknown",1);
add_opt_to_sel("assetmake","Lenovo",4);
}else if(selectedType == 3){//laptop
//3,Lenovo 6,Dell
add_opt_to_sel("assetmake","Unknown",1);
add_opt_to_sel("assetmake","Lenovo",3);
add_opt_to_sel("assetmake","Dell",6);
}else if(selectedType == 2){//desktop
//2 Lenovo
add_opt_to_sel("assetmake","Unknown",1);
add_opt_to_sel("assetmake","Lenovo",2);
}else{
//1,unk
add_opt_to_sel("assetmake","Unknown",1);
}
}
//-->
</script>