我正在使用表格在 html 中创建一个表单。其中有一个下拉框包含两个值 1. Professor, 2. Librarian。现在每个值都有不同的表单字段。如果我选择 Professor，则会显示一些不同的字段，如果我选择 Librarian，则会显示一些不同的字段。
谁能告诉我该怎么做？
<table width="435" border="0">
<tr> <td>VIsit Date </td> <td><input type="text" name="textfield" /></td></tr>
<tr> <td>Last Visit Date </td> <td><input type="text" name="textfield2" /></td></tr> <tr> <td>Call Type </td>
<td>
<select name="title" size="1">
<option value ="Pro"> Professor </option>
<option value ="Lib"> Librarian </option> </select>
</td>
</tr>
</table>
最佳答案
试试这个:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page title</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script>
$(document).ready(function() {
$("#callType").on('change', function(){
$('.form1').toggle();
$('.form2').toggle();
});
});
</script>
<style>
.form2 {
display: none;
}
</style>
</head>
<body>
<select name="title" id="callType">
<option value ="Pro"> Professor </option>
<option value ="Lib"> Librarian </option>
</select>
<div class="form1">
<input type="text" name="text1" value="text1" />
<input type="text" name="text2" value="text2" />
</div>
<div class="form2">
<input type="text" name="text3" value="text3" />
<input type="text" name="text4" value="text4" />
</div>
</body>
</html>
如果下拉列表中只有两个选项，第一个表单将可见，第二个将隐藏(显示:无；)。在更改时，他们的可见性将被切换。
有几点忘了说: 1. 准备好文档中的事件处理程序。 2. 请记住，在 css 中“visibility”和“display”是不同的。即使我说可见性，我指的是显示。 jQuery show()、hide()、toggle() 更改 css 显示。 "visibility: hidden"和 "display: none"的区别在于，有了可见性，不可见的元素仍然会占用页面空间。
关于javascript - 根据下拉值加载 html 表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11096736/