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是一个原因，因此当您添加新数据时，它的作用就像是重新加载页面但根本不加载

我要在我的克隆元素显示后重新加载/刷新页面

1 个答案: