0

私はこのようなフォームを持っています:

<form action="index.php" method="get" name="gizi">
  <div id="itemRows">
    <input onclick="addRow(this.form);" type="button" value="Add row" />
  </div>
</form>

そして、これが私のスクリプトです（..「行を追加」ボタンをクリックすると、新しい行が追加されます....）

<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
   rowNum ++;
   var row = '<div class="rowNum'+rowNum+'">Select Manufacture: <select name="jenis" class="jenis"><option selected="selected">--Select manufacture--</option><option value="1">Toyota</option><option value="2">Nissan</option><option value="3">Honda</option></select> Select Car: <select name="bahan" class="bahan"><option selected="selected">--Select Car--</option></select> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></div>';
   jQuery('#itemRows').append(row);
   frm.add_qty.value = '';
   frm.add_name.value = '';
}

function removeRow(rnum) {
  jQuery('#rowNum'+rnum).remove();
}
</script>

私は他のスクリプトを持っています..これを使用して、ajaxに基づいて他の選択オプションを入力します..例：トヨタを選択します（class = "jenis"で）..その後、ajaxはclass = "bahan"で選択オプションを入力します

$(document).ready(function() {
    $(".jenis").change(function() {
        var id = $(this).val();
        var dataString = 'jenis=' + id;
        var $this = $(this);
        $.ajax({
            type: "POST",
            url: "ajax_menu.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $this.siblings(".bahan").html(html);

            }
        });

      });
   });

実際には、class="jenis" でオプションを選択すると、.. ajax は class="bahan" で他のオプションを設定しません......

4

3 に答える 3

2

選択ボックスは動的に作成されるため、イベント委任を使用する必要があります

$(document).ready(function () {
    $('#itemRows').on('change', ".jenis", function () {
        var id = $(this).val();
        var dataString = 'jenis=' + id;
        var $this = $(this);
        $.ajax({
            type: "POST",
            url: "ajax_menu.php",
            data: dataString,
            cache: false,
            success: function (html) {
                $this.siblings(".bahan").html(html);

            }
        });

    });
});

デモ:フィドル

于 2013-09-24T05:38:45.403 に答える
1

オプションを動的に作成.jenisし、でイベントをバインドしているため、機能していませんdocument.ready。次の 2 つのことを行うことができます。

  1. <select name="jenis" class="jenis" onclick="theonclickhandler">動作するはずです。

  2. selectがドキュメントにプッシュされた直後に、JavaScript でイベントをバインドします。

于 2013-09-24T05:41:10.833 に答える