select2 运行只触发一次 select

Question

我想请你帮忙。我目前在 select2/jquery 中遇到问题。我已经解决这个问题 1 天了。

场景如下： Inventory Table

我有一个客户代码和一个客户名称字段(select2)。
我可以在 客户代码 字段中输入，一旦我选择了 客户代码 ， 客户名称 字段将自动填写。
与客户名称字段相同，如果我选择了客户名称，客户代码 字段将被填写。

现在，我已经开始工作了。问题是，我有一个代码可以自动填写每个字段。但是发生的事情是，如果我更改 customer name 字段，它会填写 customer code 字段，它会再次触发更改 客户名称 字段，它会一直持续下去。他们不断地改变彼此。就像一个永无止境的循环。

我的问题是，怎样才能只触发一次，这样就不会一直循环了。

如果我更改客户代码字段，它将填写客户名称字段。停止。如果我更改 客户名称 字段，它将填写 客户代码 字段。停止。

希望得到您的指导。谢谢大家。这是我的代码：

$('body').on('select2:select', '.select-customer-code', function (e) {

    var data = e.params.data;
    var customer_code = data.id;
    var parent = $(this);

    /** Load Ajax */
    ajax_loader(baseUrl + 'merchandiser/inventory/manual/customer/info/fetch', {
        customer_code: customer_code
    }).done(function (response) {
        var response = $.parseJSON(response);
        var el = parent.parent().parent('tr').find('.select-customer-name');


        /** Load select2 */
        select2_loader_plain(el, customer_name_url);
        el.select2('trigger', 'select', {
            data: {
                id: response.customer_code,
                text: response.customer_name
            }
        });
    });

});


$('body').on('select2:select', '.select-customer-name', function (e) {
    var data = e.params.data;
    var parent = $(this);
    var el = parent.parent().parent('tr').find('.select-customer-code');

    el.select2('trigger', 'select', {
        data: {
            id: data.id,
            text: data.id
        }
    });

});

编辑：（添加了 HTML 标记）

<table width="100%" class="table table-condensed">
  <thead>
    <tr>
      <th><input type="checkbox"></th>
      <th>#</th>
      <th>Customer Code</th>
      <th>Customer Name</th>
      <th>Inventory Date</th>
      <th>Material Code</th>
      <th>Material Description</th>
      <th>UOM</th>
      <th>QTY</th>
      <th>Batch</th>
      <th>Reported By</th>

    </tr>

  </thead>


  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>1</td>
      <td><select class="form-control form-select select-customer-code"></select></td>
      <td><select class="form-control form-select select-customer-name"></select></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td>
        <select name="" id="" class="form-control">
          <option value=""></option>
        </select>
      </td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>

    </tr>


    <tr>
      <td><input type="checkbox"></td>
      <td>2</td>
      <td><select class="form-control form-select select-customer-code"></select></td>
      <td><select class="form-control form-select select-customer-name"></select></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td>
        <select name="" id="" class="form-control">
          <option value=""></option>
        </select>
      </td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>

    </tr>


  </tbody>
</table>

编辑 2：解决方案（Tom Jenkins 回答）

var code_lock = false;

$('.select-customer-code').on('select2:select', function (e) {

    var data = e.params.data;
    var customer_code = data.id;
    var customer_name = $('.select-customer-name');


    if (!code_lock) {

        /** Load Ajax */
        ajax_loader(baseUrl + 'merchandiser/inventory/manual/customer/info/fetch', {
            customer_code: customer_code
        }).done(function (response) {
            var response = $.parseJSON(response);

            customer_name.select2('trigger', 'select', {
                data: {
                    id: response.customer_code,
                    text: response.customer_name
                }
            });


        });

    }

});


$('.select-customer-name').on('select2:select', function (e) {
    var data = e.params.data;
    var parent = $(this);
    var customer_code = $('.select-customer-code');

    customer_code.select2('trigger', 'select', {
        data: {
            id: data.id,
            text: data.id
        }
    });

    code_lock = true;

    setTimeout(function () {
        code_lock = false;
    }, 1000);

});

Answer 1

如果您要添加一个名为 recentlyChanged 的全局变量，那么在您进行更改之前，您会检查它是否最近被更改过。如果它是最近更改的，则不要进行更改。如果它不是最近更改的，则设置全局变量以显示它是最近更改的，并使用 setTimeout 将其延迟更改回最近未更改。这有意义吗？

select2 运行只触发一次 select

select2 run trigger select once only

javascript

jquery

jquery-select2

select2 运行 只触发一次 select

select2 run trigger select once only

javascript

jquery

jquery-select2

select2 运行只触发一次 select