ansaurus

Question

Answer 1

+3 A:

EDIT: This answer was written before the OP said he didn't want to use appendChild(). I will keep this answer up for reference.

This post will use POJSF. (Plain Old JavaScript Framework, the framework every other framework is based on!)
^{For those who don't get it, that's a poor attempt a humor...}

Instead of using innerHTML, you can create your <option> using document.createElement()

var newOption = document.createElement('option');
newOption.label = 'works';

newOption.appendChild(document.createTextNode(newOption.label));

newOption.id = 'a';

document.getElementById('mySelect').appendChild(newOption);

If you want to remove all <option> in a <select>:

var selectEl = document.getElementById('mySelect');
for(var i = selectEl.children.length - 1; i >= 0; i--) {
    selectEl.removeChild(selectEl.children[i]);
}

Andrew Moore 2009-08-11 22:54:11

innerText is not supported by Firefox, see http://www.quirksmode.org/dom/w3c_html.html

karim79 2009-08-11 22:56:27

**@karim79:** Thanks, fixed. InnerText is really just needed in IE6, so even if Firefox doesn't support it, it doesn't need it.

Andrew Moore 2009-08-11 22:59:14

+1 - now that I didn't know.

karim79 2009-08-11 23:00:15

**@karim79:** Only in Quirks mode and only in edge cases. Otherwise, the `.label` property works just fine.

Andrew Moore 2009-08-11 23:04:54

Answer 2

+1 A:

Check out: BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object

Nick D 2009-08-11 23:07:59

ansaurus

tags:

views:

answers:

modifying select with DOM

related questions