1

HTML

<div class="form-group">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-12">
                <table class="table table-bordered table-hover additionalMargin" id="actionTable">
                    <thead>
                    <tr >
                        <th class="text-center">Action</th>
                        <th class="text-center">Responsibility</th>
                        <th class="text-center">Completion Date</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id='actionRow1'>
            <td>
              <input type="text" name='actionInput[0][action]' id="actionInput"  placeholder='Action' class="form-control"/>
            </td>
            <td>
              <select class="responsibility" name='actionInput[0][responsibility]' id="responsibilityInput">
                <option value=""></option>
                    <option value="One">One</option>
                    <option value="Two">Two</option>
                    <option value="Three">Three</option>
                </select>
            </td>
            <td>
              <input type="text" name='actionInput[0][deliveryDate]' id="dateInput" placeholder='Completion Date' class="form-control dateControl"/>
            </td>
          </tr>
                    </tbody>
                </table>
                <a id="add_row" class="btn btn-default pull-right">Add Row</a>
                <a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT

var cloned;

$(function() {
    initDatepickersAndSelect();
    $('#add_row').on('click', function(evt){addRow();});
    $('#delete_row').on('click', function(evt){deleteRow();});
});

function initDatepickersAndSelect() {
    cloned = $("table tr#actionRow1").eq(0).clone();
    $(".dateControl:first").datepicker({
      dateFormat: "dd-mm-yy"
    });

    $(".responsibility:first").select2({
      tags: true
    });
}

function addRow() {

    var $tr = cloned.clone();
    var newRowIdx = $("table#actionTable tr").length;
    $tr.attr('id', 'actionRow' + newRowIdx);

    $tr.find("input, select").each(function(i_idx, i_elem) {

      var $input = $(i_elem);

      if($input.is("input")) {
        $input.val("");
      }

      $input.attr({
        'id': function(_, id) {
          return id + newRowIdx;
        },
        'name': function(_, name) {
          return name.replace('[0]', '['+ newRowIdx +']');
        },
        'value': ''
      });


    });
    $tr.appendTo("table#actionTable");

    $(".dateControl", $tr).datepicker({
      dateFormat: "dd-mm-yy"
    });

    $(".responsibility", $tr).select2({
      tags: true
    });
}

function deleteRow() {
    var curRowIdx = $("table#actionTable tr").length;
    alert(curRowIdx);
    if (curRowIdx > 1) {
        $("#actionRow" + (curRowIdx - 1)).remove();
        curRowIdx--;
    }
}

Jsfiddle - https://jsfiddle.net/r94pkLLb/3/

一切正常,但考虑到责任选择有大约 10000 个选项。

我想知道是否有办法对此进行优化,以便 select2 加载为空,但在用户键入搜索时开始从公共 JSON 数组中填充数据?

我浏览了 select2 文档和示例,但找不到解决方案。非常感谢任何帮助或指示。请让我知道我是否可以提供有关该问题的任何详细信息。

4

0 回答 0