0
我想要一個下拉菜單,如果我選擇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>
你打算使用jQuery嗎? – 2012-07-31 10:19:38