更改下拉问题的内容
Change content on dropdown problems
本文关键字:问题 更新时间:2024-05-13
我想要一个下拉菜单,如果我选择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>
为什么不将这些id赋予tr元素,而不是创建div。我试着更改了一些页面结构。它奏效了。我将给定给div元素的id分配给其中的tr元素,这就成功了。
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 将PHP变量传递给jQuery时遇到问题
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 参数变量出现ngTable指令问题
- 剑道网格jQuery动画()问题
- 我的jQuery插件参数没有正确启动,遇到了问题
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- TableExport jquery插件:文件名和扩展名问题
- JavaScript Pub/Sub属性访问问题
- JavaScript异步问题
- 如何解决Yii中的页面刷新问题
- Safari(Mac OS)上的jQuery平滑滚动问题
- jqGrid树网格问题
- 使用正则表达式评估电子邮件地址时出现性能问题
- 如何消除代码中的未定义和其他问题
- JavaScript代码问题:我正在将对象转换为数组
- 三星智能电视应用程序;Brightcove示例应用程序远程控制问题
- 由于iframe导致的问题
- ReactJS和SpringDataRest缓存问题可能与websocket有关
- Backbone LayoutManager渲染问题