ドロップダウンメニューを選択すると、いくつかの入力フィールドが表示されvalue1
、選択するvalue2
と他の入力フィールドが表示されます。そのため、このコードをオンラインで見つけ、ニーズに合わせて調整しようとしています。残念ながらそれは機能しません、テーブルは常に表示されています。テーブル(プレーンテキストのみ)を使用しない場合、コードは機能します。
Javascript
<script type='text/javascript' src='http://jsfiddle.net/js/lib/mootools-core-1.4.5-nocompat.js'></script>
<script type='text/javascript'>
function showForm(id) {
document.getElementById('submitForm').style.display = "block";
if (id == 0) {
document.getElementById('submitForm').style.display = "none";
}
for (var i = 1; i < 4; i++) {
if (i == id) {
document.getElementById(i).style.display = 'block';
} else {
document.getElementById(i).style.display = 'none';
}
}
}
</script>
HTML
<table>
<tr>
<td>Selecteer uw materiaal: </td>
<td>
<select id="dropdownMenu" name="dropdownMenu" onchange="javascript: showForm(document.getElementById('dropdownMenu').value);">
<option value="0">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Other</option>
</select></td>
</tr>
<div id="1" style="display: none;">
<tr>
<td>Aantal videobanden: </td>
<td><input type="text" name="aantalVideo" value="" /></td>
</tr>
<tr>
<td>Geschatte speelduur (in minuten): </td>
<td><input type="text" name="duurVideo" value="" /></td>
</tr>
</div><!-- /1 -->
<div id="2" style="display: none;">
<tr>
<td>Aantal spoelen: </td>
<td><input type="text" name="aantalSpoelen" value="" /></td>
</tr>
<tr>
<td>Geschatte speelduur (in minuten): </td>
<td><input type="text" name="duurSpoelen" value="" /></td>
</tr>
</div><!-- /2 -->
<div id="3" style="display: none;">
<tr>
<td> </td>
<td>Overig</td>
</tr>
</div><!-- /3 -->
<div id="submitForm" style="display: none;">
<tr>
<td> </td>
<td><input value=" Order aanmaken " type="submit"></td>
</tr>
</div><!-- /submitForm -->
</table>