MySelect.add - Blir fel i Explorer

Hej,

Jag fyller ett par <select> listor dynamiskt med ajax.
Problemet är att det fungerar inte i Explorer 7, får "Typmatchningsfel".

Koden som skapas kan se ut såhär:

var level_x0 = document.createElement("option"); 
level_x0.value = 1; 
level_x0.className = "row-odd"; 
level_x0.appendChild(document.createTextNode("Nivå 1")); 
[b]selectMenu.add(level_x0,null); [/b]

var level_x1 = document.createElement("option"); 
level_x1.value = 2; 
level_x1.className = "row-even"; 
level_x1.appendChild(document.createTextNode("Nivå 2")); 
[b]selectMenu.add(level_x1,null); [/b]

var level_x2 = document.createElement("option"); 
level_x2.value = 3; 
level_x2.className = "row-odd"; 
level_x2.appendChild(document.createTextNode("Nivå 3 & 4")); 
[b]selectMenu.add(level_x2,null); [/b]

Det är de fetstilta raderna som blir fel.

Syntaxen för 'add' ska se ut såhär:

void add(in HTMLElement element, in HTMLElement before) raises(DOMException);

Koden som fyller listan ser ut såhär:

function createLevelList(index, predef_group)
{
	var selectMenu = getElemRefs("level_id");
	while (selectMenu.hasChildNodes()) {
		selectMenu.removeChild(selectMenu.firstChild);
	}
	try {
		[b]eval(ajax[index].response);[/b]
	} catch(err) {
		alert(err.description + "\n\n" + ajax[index].response);
	}
	getGroupList(document.forms['not_edit'].level_id, (predef_group ? predef_group : 0));
}

Funkar som sagt i Firefox..

Hur löser jag det här?

Nu har jag gjort om lite så att output'en från Ajax ser ut såhär:

var level_x0 = document.createElement("option");
level_x0.value = 0;
level_x0.className = "row-even";
level_x0.appendChild(document.createTextNode("-- välj --"));
var level_x1 = document.createElement("option");
level_x1.value = 1;
level_x1.className = "row-even";
level_x1.appendChild(document.createTextNode("Nivå 1"));
var level_x2 = document.createElement("option");
level_x2.value = 2;
level_x2.className = "row-odd";
level_x2.appendChild(document.createTextNode("Nivå 2"));
var level_x3 = document.createElement("option");
level_x3.value = 3;
level_x3.className = "row-even";
level_x3.appendChild(document.createTextNode("Nivå 3 & 4"));
var elOptOld = selectMenu.options[selectMenu.selectedIndex];
try {
	selectMenu.add(level_x0, elOptOld);
	selectMenu.add(level_x1, elOptOld);
	selectMenu.add(level_x2, elOptOld);
	selectMenu.add(level_x3, elOptOld);

} catch(ex) {
	selectMenu.add(level_x0, selectMenu.selectedIndex);
	selectMenu.add(level_x1, selectMenu.selectedIndex);
	selectMenu.add(level_x2, selectMenu.selectedIndex);
	selectMenu.add(level_x3, selectMenu.selectedIndex);
}

Läste här att man var tvungen att köra en specialare med try..catch för att det skulle funka i Explorer. Problemet just nu är att det även lade av i Firefox, utan att jag får något felmeddelande.

Några förslag?

I stället för att säga select.add(option) så kan du testa:

selectMenu.options[selectMenu.options.length] = level_x0;
selectMenu.options[selectMenu.options.length] = level_x1;
...
selectMenu.options[selectMenu.options.length] = level_xN;

Nu ser min output ut såhär:

var level_x0 = document.createElement("option");
level_x0.value = 0;
level_x0.className = "row-even";
level_x0.appendChild(document.createTextNode("-- välj --"));
var level_x1 = document.createElement("option");
level_x1.value = 1;
level_x1.className = "row-even";
level_x1.appendChild(document.createTextNode("Nivå 1"));
var level_x2 = document.createElement("option");
level_x2.value = 2;
level_x2.className = "row-odd";
level_x2.appendChild(document.createTextNode("Nivå 2"));
var level_x3 = document.createElement("option");
level_x3.value = 3;
level_x3.className = "row-even";
level_x3.appendChild(document.createTextNode("Nivå 3 & 4"));
try {
   selectMenu.options[selectMenu.options.length] = level_x0;
   selectMenu.options[selectMenu.options.length] = level_x1;
   selectMenu.options[selectMenu.options.length] = level_x2; 
   selectMenu.options[selectMenu.options.length] = level_x3;

} catch(ex) {
   selectMenu.options[selectMenu.options.length] = level_x0;
   selectMenu.options[selectMenu.options.length] = level_x1;
   selectMenu.options[selectMenu.options.length] = level_x2;
   selectMenu.options[selectMenu.options.length] = level_x3;
}

Fungerar fint i Firefox fortfarande, men i Explorer får jag:

Objektet stöder inte egenskapen eller metoden.

Vad är fel?

Det här är helt sinnessjukt, jag har tagit exemplet härifrån: http://www.mredkj.com/tutorials/tutorial005.html

Den sidan funkar både i Firefox och i Explorer, min kod är ju identiskt. Förstår inte det här..

Efter lite forskning visade det sig att följande gäller för Internet Explorer: antingen skriver man

var elm = document.createElement("option");
selectMenu.options.add(elm);
elm.innerHTML = "...";

...d.v.s. man anropar add() på options och sätter egenskaperna på elm efter att det add():ats.

Eller så skriver man så här (som också fungerar i ex. FF):

var elm = new Option("...");
selecMenu.options[selectMenu.options.length] = elm;

Okej, jag kan inte lösa det enligt ditt andra exempel, eftersom inte verkar gå att sätta t.ex. klassnamn på varje option jag lägger till.

Eller går det?
Annars får jag generera olika output beroende på webbläsare och det känns lite onödigt.
Hur kan det komma sig att det fungerar på länken jag hänvisar till ovan (http://www.mredkj.com/tutorials/tutorial005.html)?

Där sätter dom egenskaperna innan .add

Yes, har löst det...

Det här funkar:

var level_x0 = document.createElement("option");
level_x0.text = "-- välj --";
level_x0.value = 0;
level_x0.className = "row-even";
var level_x1 = document.createElement("option");
level_x1.value = 1;
level_x1.className = "row-even";
level_x1.text = "Nivå 1";
var level_x2 = document.createElement("option");
level_x2.value = 2;
level_x2.className = "row-odd";
level_x2.text = "Nivå 2";
var level_x3 = document.createElement("option");
level_x3.value = 3;
level_x3.className = "row-even";
level_x3.text = "Nivå 3 & 4";
try {
	selectMenu.add(level_x0, null);
selectMenu.add(level_x1, null);
selectMenu.add(level_x2, null);
selectMenu.add(level_x3, null);

	} catch(ex) {
		selectMenu.add(level_x0);
selectMenu.add(level_x1);
selectMenu.add(level_x2);
selectMenu.add(level_x3);

	}

Jag bytte ut .appendChild(document.createTextNode()); mot .text