复制PHP表的新行填充的下拉列表

Question

我想创建的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>'; 
    } 

Answer 1

首先设置动态ID为所有的下拉菜单进行exammple

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的选择框，因此通过我们可以调用特定的行容易..