Spaces not displayed when adding Options to Select box

With Option object, you can add multiple spaces to IE, but Firefox.

To work around it, see my sample code.


<FORM name="myForm">
Location (building room) <SELECT name="loc" style="font-family:monospace,Courier,Courier New;font-size:12px"></SELECT>
</FORM>

[SCRIPT language="JavaScript"]
function addOption(obj, text, value) {
value += ""; //in case of number
if (!document.all) { //Firefox
text = text.replace(/\s/g, "\xA0");
}
var newOption = new Option(text,value);
obj.options[obj.options.length] = newOption;

return newOption;
}

addOption(document.myForm.loc, "Please select location" , 0);
addOption(document.myForm.loc, " City Hall          A101" , 1);
addOption(document.myForm.loc, " Governor Hall      1" , 2);
addOption(document.myForm.loc, " Constitution Hall  1" , 3);
addOption(document.myForm.loc, " State Hall         1" , 4);
[/SCRIPT]

Firefox innerHTML is not synchronized with DOM

Here is solution.

I remember I have this problem before. Today, I meet this problem again.