function createSetTextAddOption(selectEl,val,displayText) {
var o = document.createElement("OPTION");
o.value = val;
o.text = displayText;
selectEl.options.add(o);
return false;
}
function createSetInnerHTMLAddOption(selectEl,val,displayText) {
var o = document.createElement("OPTION");
o.value = val;
o.innerHTML = displayText;
selectEl.options.add(o);
return false;
}
function createAddOptionSetInnerHTML(selectEl,val,displayText) {
var o = document.createElement("OPTION");
o.value = val;
selectEl.options.add(o);
o.innerHTML = displayText;
return false;
}
function createAddOptionSetText(selectEl,val,displayText) {
var o = document.createElement("OPTION");
o.value = val;
selectEl.options.add(o);
o.text = displayText;
return false;
}
And yet, it mostly does work, aside from the innerHTML limitation...This method can be used to add elements only after the page loads.
If the method is applied inline, a run-time error occurs.
// generally compatible inline adds
createSetTextAddOption(document.getElementById('sel5'),'1','added value 1');
createAddOptionSetInnerHTML(document.getElementById('sel5'),'3','added value 3');
createAddOptionSetText(document.getElementById('sel5'),'4','added value 4');
addNewSelect(document.getElementById('sel5'),'1','added value 1',createSetTextAddOption);
addNewSelect(document.getElementById('sel5'),'1','added value 3',createAddOptionSetInnerHTML);
addNewSelect(document.getElementById('sel5'),'1','added value 4',createAddOptionSetText);
// these two fail silently in IE
createSetInnerHTMLAddOption(document.getElementById('sel5'),'2','added value 2');
addNewSelect(document.getElementById('sel5'),'1','added value 2',createSetInnerHTMLAddOption);