新解决方案

Question

我在Django中使用Select2作为多对多关系。由于各种验证限制，我发现在将它们输入Select2标记字段时，通过AJAX请求创建相关对象是最容易的。低于最小的例子（和Fiddle）。

HTML：

<select class="js-example-tags form-control" multiple="" tabindex="-1" aria-hidden="true"></select>

一点CSS：

.js-example-tags {
  width: 100%;
}

和JS：

function register(event) {
  console.log(event);
  if (event.params.data.id == event.params.data.text) {
    $.ajax({
      type: 'POST',
      url: 'https://www.random.org/integers/?num=1&min=0&max=999&col=1&base=10&format=plain&rnd=new',
      success: function(data) {
        $('option[value="' + event.params.data.text + '"').attr('value', data);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        $('option[value="' + event.params.data.id + '"]').remove();
      }
    });
  }
}


$(".js-example-tags").select2({
  tags: true,
  data: [{"text": "Known Author 1", "id": 1}, {"text": "Known Author 2", "id": 2}]
});
$(".js-example-tags").on('select2:select', register);

当用户点击返回时：

Select2应该添加新选项，其中value = text作为占位符和
触发select2:select事件，从而触发register函数，
其AJAX调用将（希望）返回新创建的对象ID
将以前的选项值替换为真实值。

但显然，不知何故发生了其他事情：第一个标签被正确添加 - 至少从视觉外观 - 但是当你添加第二个标签时，它会在按下返回时消失，而从第三个标签开始，新标签会覆盖第一个标签。

Select2文档在这一点上是最小的，所以它可能是一个使用错误。谢谢！

Answer 1

新解决方案

我发现[此问题评论]（https://github.com/select2/select2/issues/3057#issuecomment-77560623 ）在旧解决方案在某些情况下停止工作后，在Select2错误跟踪器中。我不知道为什么selected: true属性曾经为我工作过;也许它只是似乎偶然工作。（New Fiddle。）

function selectOption(select, id) {
  var selectedValues = select.val();
  if (selectedValues == null) {
    selectedValues = new Array();
  }
  selectedValues.push(id);
  select.val(selectedValues).trigger('change');
}

function register(event) {
  if (typeof variable !== event.params &&
      event.params.data.text == event.params.data.id) {
    $.ajax({
      type: 'POST',
      url: 'https://www.random.org/integers/?num=1&min=0&max=999&col=1&base=10&format=plain&rnd=new',
      success: function(data) {
        var select = $(event.target);
        var id = data.replace(/^\s+|\s+$/g, '');
        var text = event.params.data.text;
        select.find('option[data-select2-tag="true"][value="' + text + '"]').remove();
        select.append('<option value="' + id + '">' + text + '</option>');
        selectOption(select, id);
      }
    });
  }
}

var select = $(".js-example-tags");
select.select2({
  tags: true,
  // selectOnClose: true,  // Too much recursion error
  data: [{"text": "Known Author 1", "id": 1}, {"text": "Known Author 2", "id": 2}]
});
select.on('select2:select', register);

奖金问题：“is”这个词有什么特别之处，它总是会被Select2剥夺？其他典型的停用词不会被剥夺。

旧解决方案

最后（或到目前为止的结果）我已经使用了Dario建议的解决方案 - 在每个条目（Fiddle）之后完全重新创建Select2输入：

function initSelect2(select) {
  select.find('option[data-select2-tag="true"]').remove();
  select.select2({
    tags: true,
    // selectOnClose: true,  // Too much recursion error
    data: select.data('entries')
  });
}

function register(event) {
  if (typeof variable !== event.params &&
      event.params.data.text == event.params.data.id) {
    var model = $(event.target).data('model');
    $.ajax({
      type: 'POST',
      url: 'https://www.random.org/integers/?num=1&min=0&max=999&col=1&base=10&format=plain&rnd=new',
      success: function(data) {
        var select = $(event.target);
        var entries = select.data('entries');
        entry = {id: data.replace(/^\s+|\s+$/g, ''),
                 text: event.params.data.text,
                 selected: true};
        entries.push(entry);
        select.data('entries', entries);
        initSelect2(select);
        select.parent().find('input.select2-search__field').focus();
      }
    });
  }
}

var select = $(".js-example-tags");
select.data('entries', [{"text": "Known Author 1", "id": 1}, {"text": "Known Author 2", "id": 2}]);
initSelect2(select);
select.on('select2:select', register);

我遇到的两个问题是：

该字段失去焦点，需要将其放回到Select2生成的input字段中，并且
除了新添加的具有正确ID的字段之外，重新初始化还保留data-select2-tag字段（带占位符ID），以便在重新创建Select2之前首先清除第一个字段。

这些在上面的代码中解决了。

Select2删除所有put第一个标签

1 个答案:

新解决方案

旧解决方案