[Javascript] Triple listbox dynamisch vullen

[ViNyL]

Ik heb een pagina waar ik 2 listboxes dynamisch vul. De eerste list bevat waardes die gewoon in HTML ingevoerd zijn:

HTML:

<select name="rve" id="rve" onChange="setOptions(document.forms[0].elements[3].options[document.forms[0].elements[3].selectedIndex].value);">
<option value="none">Kies...</option>
<option value="Raad van Bestuur">Raad van Bestuur</option>
<option value="Kenniscentrum">Kenniscentrum</option>
</select>

Met het stukje javascript dat erin staat roep ik een functie aan die de tweede listbox vult.

JavaScript:

function setOptions(o)
{ 
var afdeling = document.forms[0].elements[4]; 
afdeling.options.length = 0; 
if (o == "Raad van Bestuur") 
    {
        afdeling.options[afdeling.options.length] = new Option('Kies...');
        afdeling.options[afdeling.options.length] = new Option('College van Geneesheren-directeur');
    }

HTML:

<select name="afdeling" id="afdeling" onChange="setOptions2(document.forms[0].elements[4].options[document.forms[0].elements[4].selectedIndex].value);">
</select>

tot zo ver gaat het goed..

Nu wil ik op basis van de keuze in de tweede listbox een derde vullen.

Dit doe ik met dezelfde code als hierboven alleen ik spreek een ander element aan:

JavaScript:

function setOptions2(o) 
{ 
var keuze3 = document.forms[0].elements[5]; 
keuze3.options.length = 0; 
if (o == "College van Geneesheren-directeur") 
    {
        keuze3.options[keuze3.options.length] = new Option('Test');
    } 

HTML:

<select name="keuze3" id="keuze3">

Nu komt het fijne: als ik het test in Firefox werkt dit prima. Maar zodra ik het in Internet Explorer probeer werkt het vullen van de laatste listbox niet...

Waarom niet? Iemand ideeen?

[ Voor 5% gewijzigd door ViNyL op 25-07-2007 11:39 ]

[funkwurm]

Volgende valt me wel op:

HTML:

<select name="afdeling" id="afdeling" onChange="setOptions2(document.forms[0].elements[4].options[document.forms[0].elements[4].selectedIndex].value);">
</select>

Hierboven spreek je over elements[4], hieronder over elements[5].

JavaScript:

function setOptions2(o) 
{ 
var keuze3 = document.forms[0].elements[5]; 
keuze3.options.length = 0; 
if (o == "College van Geneesheren-directeur") 
    {
        keuze3.options[keuze3.options.length] = new Option('Test');
    } 

Maar waarom dit dan wel in FF werkt?

[ Voor 4% gewijzigd door funkwurm op 25-07-2007 11:38 ]

[ViNyL]

Nee ik kijk daar naar element[4].. als die veranderd moet de functie aangeroepen worden om element[5] aan te passen..

[de eerste element[3] was een foutje in me post]

[ Voor 18% gewijzigd door ViNyL op 25-07-2007 11:40 ]

[crisp]

Waarom geef je geen referentie naar je formulier mee in je eventhandlers en gebruik je niet gewoon elements['elementname'] ?
Op deze manier is het niet erg onderhoudbaar...

[ViNyL]

Dat heb nu aangepast, maar dat helpt helaas niet...

En wat bedoel je hier precies mee?
"Waarom geef je geen referentie naar je formulier mee in je eventhandlers"

[ Voor 52% gewijzigd door ViNyL op 25-07-2007 11:54 ]

[crisp]

ViNyL schreef op woensdag 25 juli 2007 @ 11:50:
Dat heb nu aangepast, maar dat helpt helaas niet...

En wat bedoel je hier precies mee?
"Waarom geef je geen referentie naar je formulier mee in je eventhandlers"

HTML:

<form>
  <select name="foo" onchange="setOptions(this, 'bar')">
    <option>..
    <option>..
    <option>..
  </select>
  <select name="bar"></select>
</form>

JavaScript:

function setOptions(select, relatedSelectName)
{
  var form = select.form;
  var relatedSelect = form.elements['relatedSelectName'];

  // etcetera
}

[ViNyL]

Thanks voor de uitleg. Ga er morgen gelijk even mee aan de gang.. Will post the outcome.

Hmm als ik het zo overneem en aanpas als je hier boven post krijg ik alleen maar de foutmelding:

"relatedSelect" has no name

Mijn originele functie is misschien niet pretty maar die werkt wel in FF... en niet in IE ...
Heeft het soms te maken dat je elementen aanspreekt die er niet fysiek zijn (dus in je HTML)? maar dat deze ook met javascript aangemaakt zijn?

edit:

Topic mag dicht, script rewrite gedaan en functioneert nu. Laat nu de velden op een andere manier inladen en dat gaat in IE wel goed..

[ Voor 82% gewijzigd door ViNyL op 26-07-2007 09:51 ]