Input toevoegen bij bepaalde selectie van dropdown

[Milenko]

Hi

Ik zoek een scriptje (ik denk javascript) waarmee er automatisch een input veld wordt toegevoegd bij een bepaalde selectie uit een dropdown menu. Zelf ben ik niet zo goed met javascript, eigenlijk kan ik het gewoon niet Iemand die zo'n scriptje heeft? Ik had op internet al wat gezocht, maar zonder goed resultaat.

Groetjes Milenko

 

[That Guy]

elementen bouwen gaat met createElement. Toevoegen met appendChild:

[JS]function voegInputToe(parentID)
{
var input = document.createElement('input');

input.setAttribute('type', 'text');
input.setAttribute('value', 'hallo!'); // je hebt nu dus eigenlijk dit: <input type='text' value='hallo!' />

document.getElementById(parentID).appendChild(input);
}[/JS]

 

[Milenko]

Bedankt voor je reactie!

Ik heb nog wel een vraagje: hoe kan je die input laten toevoegen bij een bepaalde selectie van een dropdownmenu? Ik dacht zelf aan een ifje, maar dat gaat niet werken bedacht ik later..

 

[That Guy]

Well, ik neem aan dat het gewoon een link is...:

<... dropdown spul ...>

   <a onclick='voegInputToe("...");'>klik hier!</a>

</...>

 

[Robin S]

Als je met een select-element te maken hebt, kun je onchange gebruiken om te detecteren wanneer een waarde verandert. Dan wil je dat er eerst een functie aangeroepen wordt die bekijkt of er voor de nieuwe waarde een input nodig is. Als dat het geval is, roep je de functie van That Guy aan, die de input op de juiste plek voor je toevoegd
[JS]function checkValue(select, val, parentId) {
if (select.value == val) {
voegInputToe(parentId);
}
}

function voegInputToe(parentID) {
var input = document.createElement('input');

input.setAttribute('type', 'text');
input.setAttribute('value', 'hallo!'); // je hebt nu dus eigenlijk dit: <input type='text' value='hallo!' />

document.getElementById(parentID).appendChild(input);
}[/JS]

<select onchange="checkValue(this, 'testB', 'inputTarget');">
	<option value="testA">A</option>
	<option value="testB">B</option>
</select>
<div id="inputTarget"></div>