Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

[javascript en dropdown-keuzelijst]

Anoniem
gamingbas
2 antwoorden
  • Hallo iedereen,

    Ik ben voor een schoolproject bezig met een html-pagina met daarin een formulier om pizza's te bestellen.
    Ik heb daarin onder andere een dropdown lijst gemaakt om de gebruiker bijvoorbeeld formaat en beleg te laten kiezen.

    De bedoeling is dat een stukje javascript deze invoer verwerkt en weer wegschrijft in een textarea.

    Dit is de html code (formulier):
    [code:1:8e4b803f0c]
    <form name="pizza">
    <select onChange="verwerk()">
    <option name="salami">Salami</option>
    <option name="worst">Worst</option>
    <option name="ham">Ham</option>
    <option name="shoarma">Shoarma</option>
    </select>
    </form>
    [/code:1:8e4b803f0c]

    Zoals je ziet geeft het formulier data aan de functie verwerk() op het moment dat de onChange wordt getriggerd.

    Nu wil ik graag weten hoe ik in javascript een formulierveld in een variabele kan wegschrijven. Bij een tekstveld is dit heel simpel:
    [code:1:8e4b803f0c]
    function verwerk()
    {
    variabele = document.formuliernaam.veldnaam.value
    }
    [/code:1:8e4b803f0c]

    Dit werkt alleen niet bij een dropdown met <select> en <option>.

    Kan iemand me uit de brand helpen?

    Vriendelijke groet,
    Bas
  • De "truuk" met zo'n dropdown zit 'm vooral in de selectedIndex.
    Iedere keuze is weer een apart los onderdeeltje van de dropdown en in die aard weer vergelijkbaar met een tekstbox. Verder wordt zo'n losse keuze ook weer benaderd via de 'value' die erop is gezet. Direct benaderen via de 'name' zoals in jouw voorbeeld kan ook, maar is wat omslachtiger.


    [code:1:96e1d8c53e]<script language='JavaScript'>
    function verwerk()
    {
    // referentie naar de dropdown o.b.v. z'n ID:
    objSelect = document.getElementById('toping');
    variabele = objSelect[objSelect.selectedIndex].value;
    alert(variabele)

    // of op jouw textbox-manier met names:
    dropdown = document.pizza.selecteer;
    variabele2 = dropdown[dropdown.selectedIndex].value;
    alert(variabele2);
    // volledig uitgeschreven:
    variabele3 = document.pizza.selecteer[document.pizza.selecteer.selectedIndex].value;
    alert(variabele3);

    }
    </script>

    <form id='theForm' name="pizza">
    <select id='toping' name='selecteer' onChange="verwerk()">
    <option value="salami">Salami</option>
    <option value="worst">Worst</option>
    <option value="ham">Ham</option>
    <option value="shoarma">Shoarma</option>
    </select>
    </form> [/code:1:96e1d8c53e]

    Persoonlijk werk ik overigens liever met ID's, maar voor de werking op zich is dat in dit voorbeeld niet noodzakelijk.
    Meer info vind je o.a. hier: http://www.w3schools.com/jsref/dom_obj_select.asp
    net als meer (basis)info over javascript: http://www.w3schools.com/js/default.asp

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.