InnerHTML and Select option in IE

Hello. This is my second post.

The non-DOM property innerHTML can't add options to a tag select in Internet Explorer.

Example not working:

document.getElementById("my_select").innerHTML = "not work";

The correct way to insert options in a select is using appendChild or addOption functions. But that's tiring if we are working with Ajax.

Use innerHTML is not the standard but it is very useful.

The function above, will help you to insert options like using innerHTML, in IE, Firefox or Opera.

Updated: now supports option-selected

Using my function:

var inner = "Now work";


select_innerHTML(document.getElementById("my_select"),inner);

The function. Add to your lib.

function select_innerHTML(objeto,innerHTML){
/******
* select_innerHTML - corrige o bug do InnerHTML em selects no IE
* Veja o problema em: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228
* Versão: 2.1 - 04/09/2007
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
* @objeto(tipo HTMLobject): o select a ser alterado
* @innerHTML(tipo string): o novo valor do innerHTML
*******/
objeto.innerHTML = ""
var selTemp = document.createElement("micoxselect")
var opt;
selTemp.id="micoxselect1"
document.body.appendChild(selTemp)
selTemp = document.getElementById("micoxselect1")
selTemp.style.display="none"
if(innerHTML.toLowerCase().indexOf(""
}
innerHTML = innerHTML.toLowerCase().replace(/ selTemp.innerHTML = innerHTML


for(var i=0;i var attrName = spantemp.attributes[j].nodeName;
var attrVal = spantemp.attributes[j].nodeValue;
if(attrVal){
try{
opt.setAttribute(attrName,attrVal);
opt.setAttributeNode(spantemp.attributes[j].cloneNode(true));
}catch(e){}
}
}
//getting styles
if(spantemp.style){
for(var y in spantemp.style){
try{opt.style[y] = spantemp.style[y];}catch(e){}
}
}
//value and text
opt.value = spantemp.getAttribute("value")
opt.text = spantemp.innerHTML
//IE
opt.selected = spantemp.getAttribute('selected');
opt.className = spantemp.className;
}
}
document.body.removeChild(selTemp)
selTemp = null
}

Another solution to innerHTML/Select/IE problem, here

Posted in: html info