1

テーブルを使用してhtmlで1つのフォームを作成しています。ドロップダウンボックスが1つあるものには、2つの値が含まれています。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>

ドロップダウンに2つのオプションしかない場合は、最初のフォームが表示され、2番目のフォームが非表示になります（表示：なし;）。また、変更すると、表示が切り替わります。

言及するのを忘れた点はほとんどありません。1。ドキュメント内のイベントハンドラーを準備します。2.cssでは「可視性」と「表示」が異なることに注意してください。視認性と言っても、ディスプレイのことを言っていました。jQuery show（）、hide（）、toggle（）はcssの表示を変更します。「visibility：hidden」と「display：none」の違いは、可視性がある場合でも、非表示の要素がページ上のスペースを占めることです。

于 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 に答える