我要在我的克隆元素顯示后重新加載/刷新頁面

Question

這是一個代碼點火器項目

這是查看腳本

v_add_transaksi.php

<div class="after-add-more">
        <div class="row">
            <div class="col-md-5">
        <div class="form-group">
            <label>Pilih Kategori Menu</label>
            <select required="required" name="id_kategori_menu" class="form-control" id="kategori">
                <option value="">- Pilih Kategori Menu -</option>
                <?php 
                foreach($kategori as $row)
                { 
                  echo '<option value="'.$row->id_kategori.'">'.$row->nama_kategori.'</option>';
                }
                ?>
            </select>
        </div>
        </div>
        </div>
        <div class="row">
            <div class="col-md-4 pr-1">
                <div class="form-group">
                    <label>-Pilih Menu</label>
                    <select class="form-control" name="menu" id="menu">
                    </select>
                </div>
            </div>
            <div class="col-md-4 px-1">
                <div class="form-group">
                    <div id="jumlah">
                    <label>Jumlah</label>
                    <input type="text" class="form-control" placeholder="Username" value="">
                    </div>
                </div>
            </div>
            <div class="col-md-4 pl-1">
                <div class="form-group">
                    <div class="form-group remove">
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="form-group">
            <button class="btn btn-fill btn-success" type="submit">Submit</button>
            <a class="btn btn-success btn-fill add-more">Add More</a>
            <a class="btn btn-danger btn-fill" href="<?php echo base_url('admin/kategori_menu'); ?>">Kembali</a>
        </div>
        <div class="clearfix"></div>

然后我將jquery腳本放在首頁中 ，如下所示

<script type="text/javascript">
jQuery(document).ready(function() {
//$(".add-more").load(location.href + ".add-more");
  $("body").on("click",".add-more",function(){
      var html = $(".after-add-more:first").clone(true);
      $(html).find(".remove").html("<br><a class='btn btn-danger btn-fill remove'>Remove</a>");
    $(".after-add-more").last().after(html);
  });
  $("body").on("click",".remove",function(){ 
      $(this).parents(".after-add-more").remove();
  });
  });
</script>

jQuery腳本用於克隆v_add_transaksi.php中的表單元素。

除此之外，我還將我的下拉選擇選項設置為鏈接，所以當我選擇“分類菜單”時，具有匹配ID的 “菜單”將顯示在第二個下拉選擇選項中，這是代碼

<script>
$(document).ready(function(){ // Ketika halaman sudah siap (sudah selesai di load)
  $("#kategori").change(function(){ // Ketika user mengganti atau memilih data provinsi
    $("#menu").hide();
    $("#jumlah").hide();

    $.ajax({
      type: "POST", // Method pengiriman data bisa dengan GET atau POST
      url: "<?php echo base_url();?>admin/listMenu", // Isi dengan url/path file php yang dituju
      data: {id_kategori : $("#kategori").val()}, // data yang akan dikirim ke file yang dituju
      dataType: "json",
      beforeSend: function(e) {
        if(e && e.overrideMimeType) {
          e.overrideMimeType("application/json;charset=UTF-8");
        }
      },
      success: function(response){ // Ketika proses pengiriman berhasil
        $("#menu").html(response.list_menu).show();
        $("#jumlah").show();
      },
      error: function (xhr, ajaxOptions, thrownError) { // Ketika ada error
        alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError); // Munculkan alert error
      }
    });
  });
});
</script>

我的控制器admin.php

function listMenu() {
    $id_kategori = $this->input->post('id_kategori');
    $menu = $this->m_transaksi->get_menuByKategori($id_kategori);
    $lists = "<option value=''>- Pilih Menu -</option>";

    foreach($menu as $data){
      $lists .= "<option value='".$data->id_menu."'>".$data->nama_menu."</option>";
    }

    $callback = array('list_menu'=>$lists);
    echo json_encode($callback);
}

我的問題是，每當我單擊“添加更多”按鈕將克隆我的表單元素時，鏈式下拉列表的功能均不起作用，僅適用於第一個元素。 無論我克隆了多少表單元素，我都希望鏈式下拉列表功能起作用。

所以我怎么能做到這一點？ 任何幫助都感激不盡

Answer 1

您是否表示要從php頁面異步獲取數據，並且想將ajax查詢的結果克隆到當前頁面？

如果是的話，我認為您可以使用html元素iframe是一個原因，因此當您添加新數據時，它會像重新加載頁面一樣，但根本沒有