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，例如

 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命名选择框，所以我们可以轻松调用特定的行..

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

1 个答案: