Question

我正在使用表格在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>

Answer 1

试试这个：

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

如果下拉列表中只有两个选项，则第一个表单将可见，第二个表单将被隐藏（display：none;）。并且在变化时，他们将会切换他们的能见度。

很少有人忘记提及： 1.准备好文档中的事件处理程序。 2.请记住，在CSS中，“可见性”和“显示”是不同的。即使我说能见度，我指的是显示。 jQuery show（），hide（），toggle（）改变了css显示。 “visibility：hidden”和“display：none”之间的区别在于可见性，不可见元素仍会占用页面上的空间。

Answer 2

以下是如何在jquery中执行此操作，忘记正常的javascript。

JQUERY CODE（把它放在头部）

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

为select字段指定一个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>

应该像这样工作。

根据Dropdown值加载html表单？

2 个答案: