[JS]Weergeven van tekst na selecteren van een option in list - Softwareontwikkeling

maandag 14 augustus 2006 11:34

Acties:

Onze excuses voor het ongemak

Topicstarter

Kheb al gezocht, maar ik vermoed dat ik gewoon de verkeerde zoekwoorden gebruik ofzo.
Mijn probleem: ik heb deze functie:

code:

function set_accommodatie_retour()
{
                var sr;
        {
           var list = document.getElementById("accommodatie_heen").selectedIndex;
           document.getElementById("accommodatie_terug").options[list]selected = true;
        }
}

Deze pakt de option van de list 'accommodatie_heen' en (na het selecteren van die optie (onChange)) dezelfde waarde weer in de list 'accommodatie_terug'.
Nu wil ik echter die 2e list NIET meer, maar wil ik daar ENKEL de tekst van de gekozen optie uit de eerste list.
Moet ik dan met textlabels werken oid?
Zo ja, hoe verander ik die options[list] zodanig dat die tekst in beeld komt?

Een dag geen vertraging, is een dag niet gereisd

maandag 14 augustus 2006 11:41

Acties:

reddevil

bedoel je gewoon de text van een dropdown in een input type=text zetten??? Je vraag is nogal vaag.

Gewoon zo dus?

JavaScript:

function onChange(someList, someField)
{
    someField.value = someList.options[someList.selectedIndex].text;
}

waarbij je als parameters de selectlist en het target veld meegeeft

[ Voor 3% gewijzigd door reddevil op 14-08-2006 11:41 ]

maandag 14 augustus 2006 11:45

Acties:

Deddiekoel

Gadget nerd

Volgens mij is het de bedoeling dat als er iets in de eerste lijst wordt geselecteerd dat de tweede droplist in zijn geheel wordt vervangen door een blokje vaste tekst.
Ik zou zeggen dat die tweede droplist dan in een <span> block moet staan waarmee je met JS de innerHTML van veranderd. Dit kan dan met een variatie op reddevil's code...

Verlanglijstje: Switch 2, PS5 Pro Most wanted: Switch 2

maandag 14 augustus 2006 11:47

Acties:

reddevil

hrmz als dat de bedoeling is, zou ik gewoon de 2e dropdown in een span gooien en een textveld in een andere span en dan afhankelijk van de eerste dropdown de ene span hidden maken en de andere niet.

maandag 14 augustus 2006 12:02

Acties:

Deddiekoel

Gadget nerd

Hiermee moet het lukken. Dit is wel zonder apart .js bestand en zonder eventuele tweede droplist die vervangen moet worden:

HTML:

<HTML>
<HEADER>
<TITLE>Poo example</TITLE>
</HEADER>
<BODY>
<FORM>
    <SELECT id="colorpicker" onChange="document.getElementById('colorTxt').innerHTML = this.options[this.selectedIndex].value;">
        <OPTION value="Nothing"></OPTION>
        <OPTION value="Brown">Brown</OPTION>
        <OPTION value="Yellow">Yellow</OPTION>
        <OPTION value="Black">Black</OPTION>
    </SELECT>
</FORM>
<P><SPAN id="colorTxt">What</span> is the color of poo</P>
</BODY>
</HTML>

Verlanglijstje: Switch 2, PS5 Pro Most wanted: Switch 2

maandag 14 augustus 2006 22:48

Acties:

456

Onze excuses voor het ongemak

Topicstarter

Deddiekoel schreef op maandag 14 augustus 2006 @ 12:02:
Hiermee moet het lukken. Dit is wel zonder apart .js bestand en zonder eventuele tweede droplist die vervangen moet worden:

HTML:

<HTML>
<HEADER>
<TITLE>Poo example</TITLE>
</HEADER>
<BODY>
<FORM>
    <SELECT id="colorpicker" onChange="document.getElementById('colorTxt').innerHTML = this.options[this.selectedIndex].value;">
        <OPTION value="Nothing"></OPTION>
        <OPTION value="Brown">Brown</OPTION>
        <OPTION value="Yellow">Yellow</OPTION>
        <OPTION value="Black">Black</OPTION>
    </SELECT>
</FORM>
<P><SPAN id="colorTxt">What</span> is the color of poo</P>
</BODY>
</HTML>

Tenx!
Dit bedoelde ik! En het werkt in de vorm zoals ik het wil hebben...
Bedankt.

Een dag geen vertraging, is een dag niet gereisd

maandag 14 augustus 2006 22:54

Acties:

crisp

Devver

Pixelated

innerHTML gebruiken om enkel de waarde van een enkele textNode te vervangen is als een moker gebruiken om een kleine spijker in een stuk hout te slaan

Intentionally left blank

maandag 14 augustus 2006 23:01

Acties:

Deddiekoel

Gadget nerd

Wat is dan de slimmere/snellere/betere manier?

Verlanglijstje: Switch 2, PS5 Pro Most wanted: Switch 2

maandag 14 augustus 2006 23:10

Acties:

crisp

Devver

Pixelated

JavaScript:

1	element.firstChild.nodeValue = 'tekst';

Intentionally left blank

dinsdag 15 augustus 2006 10:14

Acties:

Deddiekoel

Gadget nerd

Hmm, ok als ik in bovenstaand voorbeeld "innerHTML" vervang met "firstChild.nodeValue" werkt het ook.

Maar wat is dan het grote nadeel van het gebruik van innerHTML? Vreet dat meer verwerkingstijd of is de ondersteuning slechter?

Verlanglijstje: Switch 2, PS5 Pro Most wanted: Switch 2

dinsdag 15 augustus 2006 11:04

Acties:

crisp

Devver

Pixelated

Deddiekoel schreef op dinsdag 15 augustus 2006 @ 10:14:
Hmm, ok als ik in bovenstaand voorbeeld "innerHTML" vervang met "firstChild.nodeValue" werkt het ook.

Maar wat is dan het grote nadeel van het gebruik van innerHTML? Vreet dat meer verwerkingstijd of is de ondersteuning slechter?

In het geval van een enkele textNode is firstChild.nodeValue sneller omdat dat niet door de HTML parser heengegooid hoeft te worden. Daarbij is het netter aangezien innerHTML geen onderdeel is van de DOM specificatie maar een IE-propriety extension.

Intentionally left blank

dinsdag 15 augustus 2006 14:00

Acties:

Deddiekoel

Gadget nerd

crisp schreef op dinsdag 15 augustus 2006 @ 11:04:
[...]
In het geval van een enkele textNode is firstChild.nodeValue sneller omdat dat niet door de HTML parser heengegooid hoeft te worden. Daarbij is het netter aangezien innerHTML geen onderdeel is van de DOM specificatie maar een IE-propriety extension.

Ah ok, maar innerHTML wordt wel door FF ondersteund. Is het zo dat innerHTML inmiddels gemeengoed is?

Verlanglijstje: Switch 2, PS5 Pro Most wanted: Switch 2