Question

我有动态表单，..我使用它来填充其他选项并且它可以正常工作

$(document).ready(function() {
    $("#itemRows").on("change", ".jenis", function() {
        var id = $(this).val();
        var dataString = 'jenis=' + id;
        var par = $(this);


        $.ajax({
            type: "POST",
            url: "ajax_menu.php",
            data: dataString,
            cache: false,
            success: function (html) {
                par.siblings(".bahan").html(html);

            }
        });

    });
  });

演示动态表单fiddle

如果我在html中使用它，它将正常工作：

<div id="itemRows">
<select name="jenis" class="jenis">
  <option selected="selected">--Jenis Makanan--</option>
  <option value="1">Makanan Pokok</option>
  <option value="2">Daging Telur</option>
  <option value="3">Buah</option>
  <option value="4">Seafood</option>
  <option value="5">Bijian</option>
  <option value="6">Sayuran</option>
  <option value="7">Susu Minyak</option>
</select>
<select name="bahan" class="bahan">
  <option selected="selected">--Pilih Bahan--</option>
</select>
</div>

但是如果我在我的html中使用它，那它就不起作用了

<table class="table table-striped" id="itemRows" cellpadding="3">
  <tbody>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Jenis</th>
      <th scope="col">Nama Bahan</th>

      <th scope="col">
        <input onclick="addRow(this.form);" type="button" value="Add row">
      </th>
    </tr>
    <tr class="1">
      <td>1</td>
      <td>
        <select name="jenis" class="jenis">
          <option selected="selected">--Jenis Makanan--</option>
          <option value="1">Makanan Pokok</option>
          <option value="2">Daging Telur</option>
          <option value="3">Buah</option>
          <option value="4">Seafood</option>
          <option value="5">Bijian</option>
          <option value="6">Sayuran</option>
          <option value="7">Susu Minyak</option>
        </select>
      </td>
      <td>
        <select name="bahan" class="bahan">
          <option selected="selected">--Pilih Bahan--</option>
        </select>
      </td>
      <td>
        <input type="button" value="Remove" onclick="removeRow(1);">
      </td>
    </tr>
  </tbody>
</table>

任何想法为什么它不起作用？

Answer 1

您需要将par.siblings(".bahan").html(html);更改为par.closest('tr').find(".bahan").html(html);，因为现在他们不是兄弟姐妹

$(document).ready(function () {
    $("#itemRows").on("change", ".jenis", function () {
        var id = $(this).val();
        var dataString = 'jenis=' + id;
        var par = $(this);


        $.ajax({
            type: "POST",
            url: "ajax_menu.php",
            data: dataString,
            cache: false,
            success: function (html) {
                par.closest('tr').find(".bahan").html(html);
                //or par.closest('td').next().find(".bahan").html(html);
            }
        });

    });
});

演示：Fiddle

动态表单在表格中不起作用

1 个答案: