jqueryを使用した複数のフォーム

Question

最初にこれを挿入する必要があるフォームの数を入力する最初のページです。

<table> 
    <form method="post" action="additem.php"> 
     <tr> 
      <td>How many records to insert? </td> 
      <td><input type="text" name="num" size="2" /></td> 
     </tr> 
    </form> 
</table> 

第二には、additem.phpに行くだろうし、あなたが挿入数に応じて、フォームが表示されます。たとえば、2を入力すると、2つのフォームが表示されます。表示されているフォームの数は問題ありません。唯一の問題は私のjqueryです。最初のフォームは動作していますが、2番目、3番目などはそうではありません。

<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script type="text/javascript"> 
function showForm() { 
    var selopt = document.getElementById("opts").value; 
    if (selopt == "branch") { 
     document.getElementById("f2").style.display = "block"; 
     document.getElementById("f1").style.display = "none"; 
    } 
    if (selopt == 0) { 
     document.getElementById("f2").style.display = "none"; 
     document.getElementById("f1").style.display = "none"; 
    } 
    if (selopt == "vicma") { 
     document.getElementById("f1").style.display = "block"; 
     document.getElementById("f2").style.display = "none"; 
    } 
} 
</script> 
<table> 
    <tbody> 
    <?php 
     $numbers=$_POST['num']; 
     for($i=1;$i<=$numbers;$i++){ 
    ?> 

    //This is my javascript which i have 2 
    values in first dropdown and will appear 
    another dropdown of the choosen value 
    on the first.Only first is working and others not.//  
    <input type="hidden" value="<?php echo $numbers;?>" name="numbers" /> 
    <tr> 
     <td><font color="black">*</font>Serial No: </td> 
     <td><input type="text" value="<?php if(isset($_POST['serialnumber'])) echo htmlspecialchars($_POST['serialnumber']);?>" name="serialnumber[]"><br></td> 
    </tr> 
    <tr> 
     <td> Requested Dept:</td> 
     <td> 
      <select name ="type" id="opts" onchange="showForm()"> 
       <option value="">Select Option</option> 
       <option value="vicma">Vicma</option> 
       <option value="branch">Branch</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div id="f1" style="display:none"> 
       <select name="user1[]" id="opts" onchange="showForm()"> 
        <option value="ACCOUNTING" >ACCOUNTING</option> 
        <option value="CNC">CNC</option> 
        <option value="CONCESSION">CONCESSION</option> 
        <option value="HR">HR</option> 
        <option value="INVENTORY">INVENTORY</option> 
        <option value="SALES AND MARKETING">SALES AND MARKETING</option> 
        <option value="WAREHOUSE">WAREHOUSE</option> 
        <option value="MIS">MIS</option> 
       </select> 
      </div> 
      <div id="f2" style="display:none"> 
       <select name="user[]" id="opts" onchange="showForm()" > 
       <?php 
        $sql = "SELECT * FROM branch_tb"; 
        $result = $conn->query($sql); 
        while($row=mysqli_fetch_array($result)){ 
        $bid = $row['id']; 
        $name = $row['branchname']; 
       ?> 
       <option value ="<?=$bid?>"><?=$name?> </option><?}?> 
       </select>     
      </div> 
     </td> 
    </tr> 
    <?php } ?> 
    </tbody> 
</table> 

Answer 1

あなたはdiv要素の一意のIDを設定する必要があり、この

<script type="text/javascript"> 
    $('.drop').change(function(){ 
     var id = $(this).data('id'); 
     var selopt = $(this).val(); 
     if (selopt == "branch") { 
      $('#first'+id).hide(); 
      $('#second'+id).show(); 
      } 
     if (selopt == 0) { 
      $('#first'+id).hide(); 
      $('#second'+id).hide(); 
     } 
     if (selopt == "vicma") { 
      $('#first'+id).show(); 
      $('#second'+id).hide(); 
     } 
    }); 
</script> 
<table> 
    <tbody> 
    <?php 
     $numbers=$_POST['num']; 
     for($i=1;$i<=$numbers;$i++){ 
    ?> 

    //This is my javascript which i have 2 
    values in first dropdown and will appear 
    another dropdown of the choosen value 
    on the first.Only first is working and others not.//  
    <input type="hidden" value="<?php echo $numbers;?>" name="numbers" /> 
    <tr> 
     <td><font color="black">*</font>Serial No: </td> 
     <td><input type="text" value="<?php if(isset($_POST['serialnumber'])) echo htmlspecialchars($_POST['serialnumber']);?>" name="serialnumber[]"><br></td> 
    </tr> 
    <tr> 
     <td> Requested Dept:</td> 
     <td> 
      <select name ="type" data-id="<?=$i?>" class="drop"> 
       <option value="">Select Option</option> 
       <option value="vicma">Vicma</option> 
       <option value="branch">Branch</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div id="first<?=$i?>" style="display:none"> 
       <select name="user1[]" data-id="<?=$i?>" class="drop" > 
        <option value="ACCOUNTING" >ACCOUNTING</option> 
        <option value="CNC">CNC</option> 
        <option value="CONCESSION">CONCESSION</option> 
        <option value="HR">HR</option> 
        <option value="INVENTORY">INVENTORY</option> 
        <option value="SALES AND MARKETING">SALES AND MARKETING</option> 
        <option value="WAREHOUSE">WAREHOUSE</option> 
        <option value="MIS">MIS</option> 
       </select> 
      </div> 
      <div id="second<?=$i?>" style="display:none"> 
       <select name="user[]" data-id="<?=$i?>" class="drop" > 
       <?php 
        $sql = "SELECT * FROM branch_tb"; 
        $result = $conn->query($sql); 
        while($row=mysqli_fetch_array($result)){ 
        $bid = $row['id']; 
        $name = $row['branchname']; 
       ?> 
       <option value ="<?=$bid?>"><?=$name?> </option><?}?> 
       </select>     
      </div> 
     </td> 
    </tr> 
    <?php } ?> 
    </tbody> 
</table> 

Answer 2

を試してみてください。これを実現するには、以下のように$ i値を "f"で使用できます。また、$ iをshowForm（）に渡します。

<div id="f<?php echo $i; ?>" style="display:none"> 
       <select name="user1[]" id="opts" onchange="showForm(this,'<?php echo $i; ?>')"> 
        <option value="ACCOUNTING">ACCOUNTING</option> 
        <option value="CNC">CNC</option> 
        <option value="CONCESSION">CONCESSION</option> 
        <option value="HR">HR</option> 
        <option value="INVENTORY">INVENTORY</option> 
        <option value="SALES AND MARKETING">SALES AND MARKETING</option> 
        <option value="WAREHOUSE">WAREHOUSE</option> 
        <option value="MIS">MIS</option> 
       </select> 
</div> 
function showForm(val, num) { 
       var selopt = val.value; 
       if (selopt == "branch") { 
        document.getElementById("f"+num).style.display = "block"; 
        document.getElementById("f"+num).style.display = "none"; 
       } 
       if (selopt == 0) { 
        document.getElementById("f"+num).style.display = "none"; 
        document.getElementById("f"+num).style.display = "none"; 
       } 
       if (selopt == "vicma") { 
        document.getElementById("f"+num).style.display = "block"; 
        document.getElementById("f"+num).style.display = "none"; 
       } 
      }