Question

我有以下代码，它们使一个选择列表从一个表中自动填充，另一个代码从另一个表（在同一个数据库中）自动填充，而不使用提交按钮。一切正常，但还有一个按钮，如果点击将使另一个表行具有相同的选择字段。

问题是： - 代码有什么问题，因为当我点击添加另一行按钮时，它会显示另一行，但只有第一个选择可操作。我需要两个选择运作; - 使用什么而不是第一个javascript代码来克隆行但保持完整的功能以下是代码：

新行的Javascript

<script>
  function addField(n) {
    var tr = n.parentNode.parentNode.cloneNode(true);
    document.getElementById('tbl').appendChild(tr);
  } 
</script>

脚本查询

<script>
  $(document).ready(function() {

    $("#id_produs").change(function() {
      var id_produs = $(this).val();

      $.ajax({
        url: 'query.php',
        type: 'post',
        data: {
          id_produs: id_produs
        },
        dataType: 'json',
        success: function(response) {

          var len = response.length;

          $("#cod_produs").empty();
          for (var i = 0; i < len; i++) {
            var id_produs = response[i]['id_produs'];
            var cod_produs = response[i]['cod_produs'];

            $("#cod_produs").append("<option value='" + id_produs + "'>" + cod_produs + "</option>");

          }
        }
      });
    });

  }); 
</script>

PHP＆amp; HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <td>Produse</td>
    <td>Cod Produs</td>
    <td>Cantitate</td>
    <td></td>
  </tr>
  <tr>
    <td>
      <select id="id_produs">
        <option value="0">- Select -</option>
        <?php
                    if ($rezultatproduse->num_rows > 0) {
                        while($rowproduse = $rezultatproduse->fetch_assoc()) {
                    ?>
          <option value="<?php echo $rowproduse[" id_denumire "]; ?>">
            <?php echo $rowproduse["denumire"]; ?>
          </option>
          <?php
                        }
                    }
                    ?>
      </select>
    </td>
    <td>
      <select id="cod_produs">
        <option value="0">- Select -</option>
      </select>
    </td>
    <td>
      <input type="text" name="cantitate" />
    </td>
    <td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>
  </tr>
</table>

以及query.php

<?php
include "conn.php";
$id_produs = $_POST['id_produs']; 
$sql = "SELECT id_produs, cod_produs FROM coduri_produse WHERE id_produs = ".$id_produs;
$result = mysqli_query($conn,$sql);
$coduri_arr = array();
while( $row = mysqli_fetch_array($result) ){
    $id_produs = $row['id_produs'];
    $cod_produs = $row['cod_produs'];
    $coduri_arr[] = array("id_produs" => $id_produs, "cod_produs" => $cod_produs);
}
// encoding array to json format
echo json_encode($coduri_arr);
?>

Answer 1

更改此

$("#id_produs").change(function() {

到这个

$(document).on('change', "#id_produs", function() {

如果您希望事件处理动态添加的元素，则需要将其绑定到文档而不是元素。因为jQuery仅将事件聚集到当前在DOM中的元素。

＆＃13;

$(document).on('change', "#id_produs", function() {
  var id_produs = $(this).val();

  $.ajax({
    url: 'query.php',
    type: 'post',
    data: {
      id_produs: id_produs
    },
    dataType: 'json',
    success: function(response) {

      var len = response.length;

      $("#cod_produs").empty();
      for (var i = 0; i < len; i++) {
        var id_produs = response[i]['id_produs'];
        var cod_produs = response[i]['cod_produs'];

        $("#cod_produs").append("<option value='" + id_produs + "'>" + cod_produs + "</option>");

      }
    }
  });
});

function addField(n) {
  var tr = n.parentNode.parentNode.cloneNode(true);
  document.getElementById('tbl').appendChild(tr);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <td>Produse</td>
    <td>Cod Produs</td>
    <td>Cantitate</td>
    <td></td>
  </tr>
  <tr>
    <td>
      <select id="id_produs">
        <option value="0">- Select -</option>
        <option value="test_value">
          test value
        </option>
      </select>
    </td>
    <td>
      <select id="cod_produs">
        <option value="0">- Select -</option>
      </select>
    </td>
    <td>
      <input type="text" name="cantitate" />
    </td>
    <td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>
  </tr>
</table>

＆＃13;

修改

此外，您应该避免添加具有相同id的元素。

这就是激活错误select的原因。将id更改为class，当然在jQuery中将ID更改为类。

$("#cod_produs")同样如此。确保你获得了exzact元素。因为现在它适用于id="cod_produs"的所有元素。

所以改成这样的事（例子）：
而不是这个

$("#cod_produs").empty();

DO

$(this).closest(".cod_produs").empty();

动态添加表行

1 个答案: