El blog d’en Melià

Hi ha més maneres, però ens centrarem en la forma de crear-les insertant opció per opció, i no tot a la vegada, com podríem fer amb innerHTML o creant un Array.

La manera clásica, al menys per a mi, és creant objectes:

myList = document.forms['formular'].elements['box'];

optionNew = new Option(1,1);
optionNew2 = new Option(2,2);
optionNew3 = new Option(3,3);

myList.options[0] = optionNew;
myList.options[1] = optionNew2;
myList.options[2] = optionNew2;

Aquesta és compatible, al menys, amb Explorer i Firefox. També podríem utilitzar appendChild, però timdrem un problema de compatibilitat amb Explorer. El codi deuria de ser així:

optionNew = new Option(1,1);
optionNew2 = new Option(2,2);
optionNew3 = new Option(3,3);

myList.appendChild(optionNew);
myList.appendChild(optionNew2);
myList.appendChild(optionNew3);

Perquè ens funcione també amb Explorer, hauríem de crear elements en el DOM:

optionNew = document.createElement('option');
optionNew2 = document.createElement('option');
optionNew3 = document.createElement('option');
optionNew.value = 1;
optionNew2.value = 2;
optionNew3.value = 3;
optionNew.innerHTML = '1';
optionNew2.innerHTML = '2';
optionNew3.innerHTML = '3';

myList.appendChild(optionNew);
myList.appendChild(optionNew2);
myList.appendChild(optionNew3);

Ara ens quedaria veure la forma d’afegir algun que altre optGroup. Per exemple:

var optgroup = document.createElement('optgroup');
optgroup.label = "Prueba1";

var optgroup2 = document.createElement('optgroup');
optgroup2.label = "Prueba2";

optionNew = document.createElement('option');
optionNew2 = document.createElement('option');
optionNew3 = document.createElement('option');
optionNew.value = 1;
optionNew2.value = 2;
optionNew3.value = 3;
optionNew.innerHTML = '1';
optionNew2.innerHTML = '2';
optionNew3.innerHTML = '3';

optgroup.appendChild(optionNew);
optgroup2.appendChild(optionNew2);
optgroup2.appendChild(optionNew3);

myList.appendChild(optgroup);
myList.appendChild(optgroup2);

Podem fer més accions sobre les opcions, però ja ho veurem més endavant…