dropdown lister som har avhengighet...

[Errae]

Hei!

 

Lurer på hvordan jeg kan gjøre 4 forskjellige bokser avhengige av hverandre. Se vedlegg.

 

Jeg har fire dropdown bokser. Disse er alder, grad, kjønn og vektklasse. Første dropdown er alder; som utløser grad. Når alder er velgt, så er det forskjellige grader som er mulig. Deretter når grad er valgt, så skal man velge kjønn.

 

Den siste boksen er så klart den som er avhengig av de tre andre. Denne boksen inneholder alle vektklassene, og endres etter om det er en jente på 14, jente på 18, eller gutt på 14 osv...

 

Er dette mulig å gjøre med javascript?

 

Takk for hjelpen!

[Drømmemannen]

Ja, det er mulig. Det ville vært ganske typisk å bruke XmlHttpRequest til dette hvis listene er lange og kombinasjonene mange, men man kan også fint legge dataene i fornuftige strukturer som en del av JavaScriptet som blir lastet ned med siden. Uansett må du bruke onchange-events på de ulike boksene og bytte ut innholdet i de andre fortløpende. Hvis du trenger hjelp til å bytte ut options i en select-boks kan du f.eks. se her: http://www.plus2net.com/javascript_tutorial/list-remove.php

[Errae]

I linken du henviste til så er det kun mulighet til å fjerne enkelte valg, men problemet mitt er at jeg ønsker at boksene skal automatisk oppdateres. Når du velger noe i boks 1 så skal det komme inn valgene i boks2.

[Caene]

HTML DOM Select

 

Ser her at select-objektet har en metode kalt add() som legger til options.

Du vil da kunne bruke onchange til å legge til options.

 

Scriptet:

function addOptions(id, selectOptions) {
var selectBox = document.getElementById(id);
	for(var i = selectBox.options.length - 1; i >= 0; i--)
	selectBox.remove(i); // Fjerner alle elementene i dropdownlisten

for(var key in selectOptions) {
	element = document.createElement('option');
	element.text = selectOptions[key];
	try {
		selectBox.add(element, null); // W3C Standard
	} catch(ex) {
		selectBox.add(element); // IE
	}
}

selectBox.disabled = false;
}

 

HTML:

<select id="sel01" onchange="addOptions('sel02', new Array('bah', 'hah', 'kah'));">
<option>Cake</option>
<option>Daim</option>
<option>Snickers</option>
</select>
<br />
<select id="sel02" disabled="disabled">
</select>

 

PS: Dette er mer et eksempel på hvordan det kan gjøres. Det finnes uten tvil andre måter som er mer elegante. For å legge til basert på input kan du bruke hjelpemetoder til å generere arrayene som legges til i select.

 

Det kan også være en ide å bruke AJAX for å f.eks. verifisere navn mot database (For å hindre duplikater) for å få "kontinuerlig" feedback. I en mindre form går det allikevel bra å sende alt i en omgang da det ikke er så mye å velge uansett.

Endret 17. september 2008 av Caene

[Errae]

Fikk det ikke til, så jeg endte opp med å poste på:

 

http://www.getafreelancer.com/projects/PHP...opdown-box.html

 

Så vi får se om jeg får løsningen.

 

Får nesten poste løsningen her etterpå. Ingen grunn for at andre skal betale for noe slikt (=