Динамическая форма не работает в таблице

Question

Динамическая форма не работает в таблице

0

У меня динамическая форма, я использую это, чтобы заполнить другой вариант выбора, и он работает

$(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);

            }
        });

    });
  });

демо-динамическая форма скрипки

если я использую это в 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>

любая идея, почему она не работает?

wawanmadda 24 сен. 2013, в 15:19

Источник

Теги:

jquery

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-09-24T09-59-00.000Z

Вам нужно изменить par.siblings(".bahan").html(html); to 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);
            }
        });

    });
});

Демо: скрипка