Listing 16-16 "JavaScript zur Darstellung von zwei voneinander abhängigen Auswahllisten"

var auswahl1 = document.createElement('p');
/* Man könnte auf die Klasse verzichten */
auswahl1.className = 'kasten';

auswahl2 = auswahl1.cloneNode(true);

var label1 = document.createElement('label');
var label2 = document.createElement('label');

label1For = document.createAttribute('for');
label1For.value = 'kontinent';
label1.setAttributeNode(label1For);

label2For = document.createAttribute('for');
label2For.value = 'land';
label2.setAttributeNode(label2For);

var text1 = document.createTextNode('Wählen Sie zuerst ein Kontinent aus');
label1.appendChild(text1);

var text2 = document.createTextNode('Wählen Sie jetzt ein Land aus');
label2.appendChild(text2);

var select1 = document.createElement('select');

var ersteOption1 = new Option('-- bitte auswählen --');
select1.add(ersteOption1, select1.options[select1.options.length]);

select2 = select1.cloneNode(true);

select1Name = document.createAttribute('name');
select1Name.value = 'kontinent';
select1.setAttributeNode(select1Name);
select1.onchange = function() {einblenden(this.value); }

select2Name = document.createAttribute('name');
select2Name.value = 'land';
select2.setAttributeNode(select2Name);

select1.id = 'kontinent';
select2.id = 'land';

var select_array = document.getElementsByTagName("select");
var optgroup_array = select_array[0].getElementsByTagName("optgroup");
var laender = new Array();
for ( var i = 0; i < optgroup_array.length; ++i) {
optionKontinent = new Option(optgroup_array[i].getAttribute('label'));
optionKontinentValue = document.createAttribute('value');
optionKontinentValue.value = i;
optionKontinent.setAttributeNode(optionKontinentValue );
select1.add(optionKontinent, select1.options[select1.options.length]);
var option_array = optgroup_array[i].getElementsByTagName("option");
laender[i] = select2.cloneNode(true);
for ( var j = 0; j < option_array.length; ++j) {
optionLand = new Option(option_array[j].firstChild.data);
laender[i].add(optionLand, laender[i].options[laender[i].options.length]);
}
}

auswahl1.appendChild(label1);
auswahl1.appendChild(select1);

var formular = document.getElementsByTagName('form')[0];
formular.removeChild(formular.firstChild);
formular.appendChild(auswahl1);

auswahl2.appendChild(label2);

function einblenden(wert) {
if (formular.childNodes[1]) {formular.removeChild(formular.childNodes[1]);}
if ((wert == "0") || (wert == "1")) {;
if (auswahl2.childNodes[1]) {auswahl2.removeChild(auswahl2.childNodes[1]);}
auswahl2.appendChild(laender[wert]);
formular.appendChild(auswahl2);
}
}

Dieses Beispiel stammt aus dem Buch Barrierefreiheit verstehen und umsetzen.