Select2删除所有的第一个标签

Select2 removes all put the first tag

本文关键字：第一个 标签 删除 Select2      更新时间：2023-09-26

我在Django中使用Select2作为多对多关系。由于存在各种验证约束，我发现在将相关对象输入Select2标记字段时，通过AJAX请求创建相关对象是最容易的。下面是一个最小的例子(和一个小提琴)。

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);

当用户点击return时:

  1. Select2应该添加新的选项value = text作为占位符和
  2. 触发select2:select事件，从而触发register功能，
  3. 的AJAX调用将(希望)返回新创建的对象ID，
  4. ，将原来的选项值替换为实际值。

但显然，发生了一些其他的事情:第一个标签被正确地添加了——至少从视觉上看是这样——但是当您添加第二个标签时，它在按回车键时消失了，并且从第三个标签开始，新的标签覆盖了第一个标签。

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

新方案

我发现[这个问题评论](https://github.com/select2/select2/issues/3057#issuecomment-77560623))在旧的解决方案在某些情况下停止工作后，在Select2 bug跟踪器中。我不知道为什么selected: true属性曾经为我工作;也许只是看起来碰巧起作用了。(新的小提琴。)

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);

我遇到的两个问题是:

  1. 字段失去焦点，需要放回input字段Select2生成，和
  2. ，重新初始化保留data-select2-tag字段(与占位符ID)除了新添加的字段与适当的ID，所以第一个需要被清除之前，Select2是重新创建。
相关文章：