Tekst (niet value!) van dropdown naar textbox...

Status
Niet open voor verdere reacties.
M

Martijnn

Gebruiker
Lid geworden
13 nov 2011
Berichten
44
Hi Helpers!

Ik wil graag een textbox vullen met de (geselecteerde) tekst uit een dropdown. Dus de tekst, niet de value...
Ik vermoed dat dit het beste met javascript gedaan kan worden?

HTML: 
<html>
<body>
<form id="form">
        <select id="mail">
        <option value="a@b.c">naam1</option>
        <option value="d@e.f">naam2</option>
    </select>
    <br /><br />
    <input type="text" value="" id="NameText" />
</form>

</body>
</html>

Bij het wijzigen van de dropdown, moet dus naam1 of naam2 in het tekstvak komen...
Ik heb het al op verschillende manieren voor elkaar gekregen om de value in de tekstbox te krijgen, maar dat wil ik dus juist niet...

Anyone?

Thanks!!

Martijn
 
Probeer dit eens:
Code: 
var selectBox=document.getElementById('mail');//pak de selectbox
var nameInput = document.getElementById('NameText');//pak de input
selectBox.addEventListener('change',function(){//het onchangeevent instellen, zal de functie runnen als de select veranderd
  nameInput.value = selectBox.options[selectBox.selectedIndex].text;//nameinput.value = de tekst in de input, selectbox.options is een array met alle <option>s, .text pakt de inhoud van options. het verschil met innerHTML is dat het alleen de tekst pakt, eventuele html tag laat die weg (alhoewel je dat uberhaub niet kan gebruiken, maar goed)
});
Als je wil dat die ook de standaard-optie invult moet je deze code pakken:
Code: 
var selectBox=document.getElementById('mail');
var nameInput = document.getElementById('NameText');
function updateInput(){nameInput.value = selectBox.options[selectBox.selectedIndex].text;}//in plaats van een inline functie maken we deze los aan
selectBox.addEventListener('change',updateInput);//koppel het event aan de functie
updateInput();//roep de functie 1x aan zodat die de waarde in de input zet

Hopelijk lukt het! als je er niet uit komt hoor ik het wel.
 
Hey Martijn!

Bedankt voor je reactie. Ik had het al voor elkaar gekregen. Ik heb het uiteindelijk zo gedaan:

[JS]<script type="text/javascript">
function PopulateName() {
var field = document.getElementById('naam');
field.value = document.getElementById('email').options[document.getElementById('email').selectedIndex].text;
}
</script>[/JS]

waar 'email' de dropdown is en 'naam' de textbox.

But still, thanks anyway! :)
 
Heten we nou beide Martijn en zijn we 1 dag na elkaar hier lid geworden? Dat is bijna toevallig! :)
 
Haha nu je het zegt, das wel heel toevallig ja!

Ah ja, fijn dat je het al had gevonden. Nog een tip: als je de var field buiten de functie instelt en evt een var aanmakt voor email (ook buiten de functie) is je code weer nét iets efficienter. Nu gaat die iedere keer dat de functie loopt (elke onchange) de var opnieuw instellen en 2x zoeken naar een element met de id email. Klein verschil, maar handig om het jezelf zo aan te leren, scheelt als je een keer iets groots aan het bouwen bent
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan