Selectbox vullen met options*

[TangLeFuzZ]

Hey,

ik wil met behulp van AJAX en PHP een selectbox vullen op basis van een andere selectbox.

Ik wil het zo simpel mogelijk houden, dus leek het me fijn als ik op de PHP pagina gewoon alle options in HTML uitspuug, bijvoorbeeld:

code:

<option value="1">a</option>
<option value="1">b</option>
<option value="1">c</option>

Het met ajax weergeven van deze php pagina gaat goed, als ik de pagina uitspuug in een tekstbox van een formulier, dan zie ik gewoon bovenstaande HTML.

Mijn idee was om een selectbox op de pagina te zetten met een divje erin:

code:

<select>
  <div id="waardes"></div>
</select>

En ik wilde dan dus met behulp van de volgende code:

code:

document.getElementById('waardes').innerHTML = mijnOpties;

...de selectbox vullen. Dit gaat alleen niet goed, hij vult de selectbox niet met de options, terwijl dat toch wel zou moeten volgens mij

Weet iemand waar het misschien aan kan liggen?

Als het nodig of handig is om meer code te posten zal ik het voorbeeldje strippen en online gooien

[Verwijderd]

TangLeFuzZ schreef op woensdag 08 februari 2006 @ 19:34:

Mijn idee was om een selectbox op de pagina te zetten met een divje erin:

code:

<select>
  <div id="waardes"></div>
</select>

En ik wilde dan dus met behulp van de volgende code:

code:

document.getElementById('waardes').innerHTML = mijnOpties;

Waarom denken mensen toch in vredesnaam dat dit alleen met een div kan? Dat hele div element slaat nergens op.
Er zijn trouwens prima manieren te vinden op het internet om een selectbox te vullen met options. Via DOM, met Option elementen, zeer eenvoudig te vinden.

[THIJZEL]

met xajax zou het zoiets moeten zijn(uit het hoofd)

code:

//objectresponse is uiteraard een objectresponse object

$objectresponse->addAssign("select","options","array(elementen)");

---

Wat je ook kan doen is gewoon heel de html van die select opnieuw genereren in een variable en dan het volgende:

code:

<div id="selectdiv">
</div>

en in je ajax stukje

code:

$html = genereerselect();
$objectresponse->addAssign("selectdiv","innerhtml",$html);

[ Voor 88% gewijzigd door THIJZEL op 08-02-2006 19:46 ]

[TangLeFuzZ]

Verwijderd schreef op woensdag 08 februari 2006 @ 19:37:
[...]

Waarom denken mensen toch in vredesnaam dat dit alleen met een div kan? Dat hele div element slaat nergens op.

Omdat ik dat mezelf blijkbaar verkeerd heb aangeleerd... als je die ene zin typet, kun je er dan niet even een korte uitleg bij doen over hoe het dan wel moet, in plaats van me de grond in te boren?

Verwijderd schreef op woensdag 08 februari 2006 @ 19:37:
Er zijn trouwens prima manieren te vinden op het internet om een selectbox te vullen met options. Via DOM, met Option elementen, zeer eenvoudig te vinden.

Ik weet dat er andere manieren zijn, maar ik wilde het zo simpel mogelijk houden, en dus puur een stukje HTML dat ik genereer op een pagina, weergeven op de andere.
Meestal zijn die andere mogelijkheden uitgebreider. Dat is misschien wel mooier, maar dat is dus in dit geval niet m'n bedoeling

[TangLeFuzZ]

THIJZEL schreef op woensdag 08 februari 2006 @ 19:41:
met xajax zou het zoiets moeten zijn(uit het hoofd)

code:

//objectresponse is uiteraard een objectresponse object

$objectresponse->addAssign("select","options","array(elementen)");

Ik heb m'n topictitel wat ongelukkig gekozen... het AJAX gedeelte gaat eigenlijk wel goed nl.
Het probleem zit hem meer in het stukje javascript dat ik erin gebruik om de uiteindelijke HTML die van de PHP pagina komt, weer te geven in de selectbox.

edit; het gaat namelijk wel goed wanneer ik de innerhtml aanpas en die div niet in een selectbox zit.

[ Voor 13% gewijzigd door TangLeFuzZ op 08-02-2006 19:48 ]

[THIJZEL]

dat met die div in een select kan je uit je hoofd zetten, dat is ook niet echt valid html..

Genereer gewoon de hele select opniew (inc) header. Dat is (vooralsnog) het makkelijkste..

[Verwijderd]

TangLeFuzZ schreef op woensdag 08 februari 2006 @ 19:42:

Omdat ik dat mezelf blijkbaar verkeerd heb aangeleerd... als je die ene zin typet, kun je er dan niet even een korte uitleg bij doen over hoe het dan wel moet, in plaats van me de grond in te boren?

Uit dat beetje code blijkt dat je er gewoon helemaal niet over nagedacht of mee geëxperimenteerd hebt. Een paar vragen die je zou kunnen hebben:
• Waarom heet de methode getElementById, en niet getDivById?
• Wat doet die methode?

Ik weet dat er andere manieren zijn, maar ik wilde het zo simpel mogelijk houden, en dus puur een stukje HTML dat ik genereer op een pagina, weergeven op de andere.
Meestal zijn die andere mogelijkheden uitgebreider. Dat is misschien wel mooier, maar dat is dus in dit geval niet m'n bedoeling

Ze zijn niet zozeer uitgebreider, ze werken een stukje logischer (en imho beter) dan innerHTML.

[TangLeFuzZ]

Verwijderd schreef op woensdag 08 februari 2006 @ 19:49:
Uit dat beetje code blijkt dat je er gewoon helemaal niet over nagedacht of mee geëxperimenteerd hebt. Een paar vragen die je zou kunnen hebben:
• Waarom heet de methode getElementById, en niet getDivById?
• Wat doet die methode?

Heb je er ooit bij nagedacht dat mensen misschien niet hele boeken lezen over een bepaald onderwerp voordat ze er mee aan de gang gaan?
Het is natuurlijk wel het beste, en ik wil het ook gewoon doen zoals het zou moeten, maar zolang ik niet beter weet, is daar natuurlijk geen sprake van.

Ik lees de laatste tijd weer veel op GoT, en het valt me op dat een groot aantal mensen zich blijkbaar beter voelen dan mensen met wat minder kennis op bepaalde gebieden.

Verwijderd schreef op woensdag 08 februari 2006 @ 19:49:
Uit dat beetje code blijkt dat je er gewoon helemaal niet over nagedacht of mee geëxperimenteerd hebt.

Dit begint haast een standaard zin te worden, en als je er wat beter over nadenkt is hij echt te walgelijk voor woorden

Ik heb mezelf (verkeerd) aangeleerd altijd getElementById te gebruiken in combinatie met een div tag.
Wat daar verkeerd aan is zie ik nog steeds niet in, maar ik zal het gaan uitzoeken.

THIJZEL schreef op woensdag 08 februari 2006 @ 19:49:
dat met die div in een select kan je uit je hoofd zetten, dat is ook niet echt valid html..

Genereer gewoon de hele select opniew (inc) header. Dat is (vooralsnog) het makkelijkste..

Ok duidelijk

[Janoz]

Om je html aan te passen kun je beter 'in DOM' denken dan 'in html'. Een select is dan niet iets waarbinnen allemaal option tags staan, maar een element die een lijstje kinderen van het type option heeft. Deze option heeft dan een attribute value en als kind een enkele textnode.

Aangezien dit meer met Javascript te maken heeft verplaats ik dit topic naar Webdesign & Graphics.

[Verwijderd]

toevallig heb ik hier recent voor school al mee zitten kloten. als je het DOM model een beetje doorhebt is het best makkelijk.. in jouw geval zou je dus ipv de div gewoon de select een ID meegeven:

HTML:

<select name="bla" id="bla">
</select>

(de 'name' is nog altidj nodig als je de resultaten later in php bijvoorbeeld met de $_POST variabele wilt uitlezen).
vervolgens kun je hem zo vullen:

JavaScript:

selectObj = document.getElementById("bla");
// zo geef je aan dat je deze select wilt gebruiken in de komende code:
with (selectObj)
{
    // leegmaken, in dit geval niet nodig maar dan weet je het maar:
    selectObj.options.length = 0;

    selectObj.options[0] = newOption("De tekst van de option","de value");
    selectObj.options[1] = newOption("De tekst van de option","de value");
}

Ik hoop dat je hier verder mee kunt, en weet niet of dit volledig de correcte manier is (zoals of dat leegmaken binnen de with() moet of niet), maar zo werkte het in ieder geval voor mij, en het is een stuk meer 'portable' en netter dan jouw oplossing.