代码之家  ›  专栏  ›  技术社区  ›  XMozart

将Select2动态添加到行

  •  0
  • XMozart  · 技术社区  · 6 年前

    sELECT2

    下面是创建表的代码:

    <table id="tbldet" class="table table-bordered table-striped table-hover" style="width:100%;margin:0 auto;">
      <thead>
        <tr>
          <th><p>Nama Barang</p></th>
          <th><p>Harga</p></th>
          <th><p>Qty</p></th>
          <th><p>Total</p></th>
          <th style="width:50px"><p>Aksi</p></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
              <select class="select2" name="det_brg" style="width:100%;">
              </select>
          </td>
          <td>10000</td>
          <td>4</td>
          <td>930000</td>
          <td><span class="btn btn-danger"><i class="fa fa-remove"></i></span></td>
        </tr>
      </tbody>
    </table>
    

    要初始化选择的javascript函数:

    function initializeSelect2(selectElementObj) {
      selectElementObj.select2({
        width: "80%",
        tags: true,
        language:"id",
        ajax: {
            url: "controller/barang_list.php",
            dataType: "json",
            type:"GET",
            delay: 250,
            data: function (params) {
                return {
                    search: params.term
                }
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                      return {
                        id:item.id,
                        text:item.text
                      }
                    })
                };
            },
            cache: false
        },
        minimumInputLength: 3,
        dropdownParent:$("#form-data")
      });
    };
        $(".select2").each(function() {
          initializeSelect2($(this));
        });
    

    //create new row
    $("#add_row").click(function(e) {
      //new row
      $("#tbldet").append(
        '<tr>\
            <td>\
                <select class="select2" name="det_brg" style="width:100%;">\
                </select>\
            </td>\
            <td>10000</td>\
            <td>4</td>\
            <td>930000</td>\
            <td><span class="btn btn-danger"><i class="fa fa-remove"></i></span></td>\
        </tr>'
      );
      var newSelect=$(this).closest("tr").find(".select2");
      initializeSelect2(newSelect);
    })
    

    我怀疑在新行中查找新的'select2'组件有问题,但是当我使用 alert(newSelect)

    1 回复  |  直到 6 年前
        1
  •  2
  •   Randy Casburn    6 年前

    你的怀疑是对的,你的代码永远找不到新的 .select2 元素。原因与方式有关 .closest() 作品。你可以在这里调查:

    https://api.jquery.com/closest/

    改变

    var newSelect=$(this).closest("tr").find(".select2");
    

    var newSelect=$("#tbldet").find(".select2").last();