Kun je er ook voor zorgen, dat als je in een bepaald veld een woord typt, dat datzelfde woord in een keuzemenu verschijnt? Het klinkt heel belachelijk, maar ik heb het echt nodig.
Tot nu toe heb ik dit gemaakt:
Dus als je "Limburg" invult, zal er ook Limburg te zien zijn.
Nu de volgende (en laatste) stap:
Het veld rechts ernaast is geblokkeerd. Als iemand voor "Other" kiest, moet het veld ernaast opengaan om tekst in te vullen.
Verder zie je nu twee keuzevelden ipv één. Die zouden allebei automatisch moeten meeveranderen zodra er tekst in het eerste veld wordt getypt. Op dit moment verandert er maar eentje mee.
Tot nu toe heb ik dit gemaakt:
Code:
<script type="text/javascript">
function verander(arr) {
var el = document.getElementById('sel');
el.options.length = 0;
for(var i = 0; i< arr.length; i++ ) {
el.options[el.options.length] = new Option(arr[i], arr[i]);
el.options[el.options.length] = new Option("Other");
}
}
</script>
<table width="600" border="0" align="center">
<tr>
<td width="20%" height="30" valign="top">woonplaats</td>
<td height="30" valign="top"><input name="titel" type="text" id="titel" size="20" onkeyup="verander([this.value]);" /></td>
</tr>
<tr>
<td width="20%" height="30" valign="top"> </td>
<td height="30" valign="top"><label>
<select id="sel">
<option value="bezig">Eerst een woonplaats invullen</option>
</select>
</label></td>
</tr>
<tr>
<td width="20%" height="30" valign="top"> </td>
<td height="30" valign="top"><input name="submit" type="submit" value="Invoegen" /></td>
</tr>
</table>
Dus als je "Limburg" invult, zal er ook Limburg te zien zijn.
Nu de volgende (en laatste) stap:
Het veld rechts ernaast is geblokkeerd. Als iemand voor "Other" kiest, moet het veld ernaast opengaan om tekst in te vullen.
Verder zie je nu twee keuzevelden ipv één. Die zouden allebei automatisch moeten meeveranderen zodra er tekst in het eerste veld wordt getypt. Op dit moment verandert er maar eentje mee.
Code:
<script type="text/javascript">
function verander(arr) {
var el = document.getElementById('sel');
el.options.length = 0;
for(var i = 0; i< arr.length; i++ ) {
el.options[el.options.length] = new Option(arr[i], arr[i]);
el.options[el.options.length] = new Option("Other");
}
}
</script>
<table width="600" border="0" align="center">
<tr>
<td width="20%" height="30" valign="top">woonplaats:</td>
<td height="30" colspan="2" valign="top"><input name="titel" type="text" id="titel" size="20" onkeyup="verander([this.value]);" /></td>
</tr>
<tr>
<td width="20%" height="30" valign="top">woonplaats 1</td>
<td height="30" valign="top">
<label>
<select id="sel">
<option value="bezig">Eerst een woonplaats invullen</option>
</select>
</label>
</td>
<td height="30" valign="top"><input readonly name="other" type="text" id="other" size="20" /></td>
</tr>
<tr>
<td height="30" valign="top">woonplaats 2</td>
<td height="30" valign="top">
<label>
<select id="sel">
<option value="bezig">Eerst een woonplaats invullen</option>
</select>
</label>
</td>
<td height="30" valign="top"><input readonly name="other2" type="text" id="other2" size="20" /></td>
</tr>
<tr>
<td width="20%" height="30" valign="top"> </td>
<td height="30" colspan="2" valign="top"><input name="submit" type="submit" value="Invoegen" /></td>
</tr>
</table>