[RESOLVED] Setting innerHTML not working in IE

[half flung pie]

I have the following code in the head section of my page.

<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?

[SambaNeko]

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.

[half flung pie]

Thanks, I've modified my original script. Pasting in case someone from the future searches and comes across this post.

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