使用填充的下拉列表复制新的 php 表行

Posted 2023-05-09

【中文标题】使用填充的下拉列表复制新的 php 表行

【英文标题】：Duplicating new row of php table with populated dropdown list

【发布时间】：2014-11-29 04:03:05

【问题描述】：

我正在尝试使用两个填充的下拉列表创建一个新的 php 表行。一行中有三列，其中两列填充了下拉列表，如果我从中选择一个数据，另一个下拉列表将根据我选择的内容自动填充。

我曾尝试创建一个新行，但问题是每当我从第一个下拉列表中选择任何行时，只有表格第一行中的第二个下拉列表发生变化。当我从第一个下拉列表中进行选择时，我无法让第二个下拉列表的每一行都工作，同一行列表上的第二个下拉列表被填充。

代码如下：

addrecipe.php

<script type="text/javascript">
function show(str) 
    if (str=="") 
        document.getElementById("productn").innerhtml="";
        return;
     
    if (window.XMLHttpRequest) 
// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    
    else  // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    
    xmlhttp.onreadystatechange=function() 
        if (xmlhttp.readyState==4 && xmlhttp.status==200) 
            document.getElementById("productn").innerHTML=xmlhttp.responseText;
        
    
xmlhttp.open("GET","pname.php?q="+str,true);
xmlhttp.send();

</script>

<script type="text/javascript">
function myCreateFunction() 
var i = 10;
var ii = 10;
var iii = 10;
if (i <= 20)
    i++;
    ii++;
    iii++;
   var table = document.getElementById("table");
   var row = table.insertRow(11);
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   var cell3 = row.insertCell(2);

   cell1.innerHTML = 
    '<select name="product_'+i+'" id="product" onchange="show(this.value)">
    <option value="">Select...</option>
    <?php $sql = mysql_query("SELECT * FROM prodcat");
    while ($row = mysql_fetch_array($sql)) 
    echo '<option value="'.$row['catID'].'">'.$row['prodCat'].'</option>'; 
    ?>  
    </select>';

  cell2.innerHTML = 
   '<select name="productn_'+ii+'" id="productn">   
   <option value="">Select...</option>   
   <?php $sql1 = mysql_query("SELECT * FROM product");  
   while($row1=mysql_fetch_array($sql1))   
   echo '<option value="'.$row1['IngID'].'">'.$row1['IngName'].'</option>';    
   ?>
   </select>';

  cell3.innerHTML = '<input class="style" type="text" name="qty_'+iii+'" id="qty">';
  
  

 </script>

 <tr>
                <td>
                <select name="product_1[]" id="product" onchange="show(this.value)">
                <option value="">Select...</option>
                <?php 
                $sql = mysql_query("SELECT * FROM prodcat");
                while ($row = mysql_fetch_array($sql))
                echo '<option value="'.$row['catID'].'">'.$row['prodCat'].'</option>';
                
                ?>
                </select>
                </td>
                <td>
                <select name="productn_1[]" id="productn">
                <option value="">Select...</option><?php
                $sql1 = mysql_query("SELECT * FROM product");
                while($row1=mysql_fetch_array($sql1))
                
                echo '<option value="'.$row1['IngID'].'">'.$row1['IngName'].'</option>';
                ?>
                </select>
                </td>
                <td>
                <input class="style" type="text" name="qty_1[]" id="qty">
                </td>
</tr>

pname.php

$q = intval($_GET['q']);

mysql_connect("$host", "$username", "$password") or die ("cannot connect"); 
mysql_select_db("$db_name") or die ("cannot select DB");

    $sql = mysql_query("SELECT * FROM product WHERE catID='$q'");
    while($row=mysql_fetch_array($sql))
    
    echo '<option value="'.$row['IngID'].'">'.$row['IngName'].'</option>';
    

【参考方案1】：

首先设置所有下拉列表的动态ID，例如

 function myCreateFunction() 
    var i = 10;
    if (i <= 20)
        i++;

       var table = document.getElementById("table");
       var row = table.insertRow(11);
       var cell1 = row.insertCell(0);
       var cell2 = row.insertCell(1);
       var cell3 = row.insertCell(2);

    cell1.innerHTML = '<select name="productCategory_'+i+'" id="productCategory_'+i+'" onchange="setProducts(this.value,this.id)">
        <option value="">Select...</option>
        <?php $sql = mysql_query("SELECT * FROM prodcat");
        while ($row = mysql_fetch_array($sql)) 
        echo '<option value="'.$row['catID'].'">'.$row['prodCat'].'</option>'; 
        ?>  
       </select>';
       cell2.innerHTML = '<select name="productn_'+i+'" id="productn_'+i+'`enter code here`">   
       <option value="">Select...</option>   
       <?php $sql1 = mysql_query("SELECT * FROM product");  
       while($row1=mysql_fetch_array($sql1))   
       echo '<option value="'.$row1['IngID'].'">'.$row1['IngName'].'</option>';    
       ?>
       </select>'; 
    cell3.innerHTML = '<input class="style" type="text" name="qty_'+iii+'" id="qty_'+iii+'">';
  
  

function setProducts(value,id) id = id.split("_")[1];
    // Here Assign Some Value by using this id
    // document.getElementById('productn_'+i) to get partiicular row dropdown


`

这里你应该用不同的 id 命名选择框，这样我们就可以很容易地调用特定的行..