1

我正在使用表格在 html 中创建一个表单。其中有一个下拉框包含两个值1.教授，2.图书管理员。现在每个值都有不同的表单字段。如果我选择教授，则会显示一些不同的字段，如果我选择图书馆员，则会显示一些不同的字段。

谁能告诉我我该怎么做？？

<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>
4

2 回答 2

2

尝试这个：

<!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 中，“可见性”和“显示”是不同的。即使我说可见性，我指的是展示。jQuery show()、hide()、toggle() 改变 css 显示。“可见性：隐藏”和“显示：无”之间的区别在于可见性，不可见元素仍然占用页面上的空间。

于 2012-06-19T09:02:41.357 回答
1

这是在 jquery 中执行此操作的方法，忘记普通的 javascript。

JQUERY 代码（把它放在头部）

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script>
    $("#YOUR_SPECIFIC_ID").change(function(){
          if ($(this).val() == "Option2") {
                $('.option1form').hide('');
                $('.option2form').show('');
          }});
         </script>
         <script>
             $("#YOUR_SPECIFIC_ID").change(function(){
         if ($(this).val() == "Option1") {
                            $('.option1form').show('');
                $('.option2form').hide('');}});

</script>

为选择字段分配一个 id：

<select name="asia" style="width:233px;" id="YOUR_SPECIFIC_ID">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    </select>

然后，您需要为不同的选择制作不同的表格。像这样。

<div class="option1form" style="display:none">
<input type="text" name="example1_1">
<input type="text" name="example1_2">
</div>

<div class="option2form" style="display:none">
<input type="text" name="example2_1">
<input type="text" name="example2_2">
</div>

应该像这样工作。

于 2012-06-19T08:37:51.677 回答