Select2：使用 ajax 数据源时添加和 select 手动值

Question

我想用 select2(4.0.0) 和 jquery(2.1.4) 实现以下场景：

我有一个 select 框，它从外部源（java 应用程序服务器上的端点）获取数据
用户可以选择返回值之一，也可以想出自己的值
现在，当用户提交表单并且服务器端验证失败时，我想显示包含用户之前提供的所有值的表单，因此 select 框应该将值发送到服务器。

要做到这一点

我使用select的ajax从服务器
我使用 createTag 来允许用户创建自己的值
我想使用 initSelection 将用户先前添加的值预填充 select 框。

我的代码如下所示：

$("select[name='serie']").select2({
    ajax: {
        url: "http://javaendpoit/serie/filter",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            name: params.term,
            page: params.page
          };
        },
        processResults: function (data, page) {
          return {
            results: $.map(data, function (item) {
              return {
                text: item.name,
                name: item.name,
                id: item.name
              }
            })
          };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; },
      minimumInputLength: 2,
      templateResult: formatRepo,
      templateSelection: formatRepoSelection,
      tags: true,
      createTag: function (tag) {
        return {
          id: tag.term,
          text: tag.term,
          name: tag.term,
          isNew : true
        };
      },
      /* below part is rendered by jsp so that it has the value from previous form submission; if it is initial form render the below part is not included */
      initSelection : function (element, callback) {
            callback({id:"Name",name:"Name","text":"Name"});
      }   
    });

 function formatRepo (serie) {
        if (serie.loading) return serie.text;
        var markup = '<div class="clearfix">' +
        '<div clas="col-sm-10">' +
        '<div class="clearfix">' +
        '<div class="col-xs-12">' + serie.name + '</div>' +
        '</div>';
        markup += '</div></div>';
        return markup;
  }

  function formatRepoSelection (serie) {
    return serie.name;
  }

这很好用。这意味着在提交后我可以在 select 框中看到值名称，它是 selected 值。不过，如果我再次尝试提交此表单，请求中会丢失该值。

根据此处主题数量的建议，我添加了以下行（请参阅最后一行）。

  /* [...] */
  initSelection : function (element, callback) {
        callback({id:"Name",name:"Name","text":"Name"});
  }   
}).select2("val","Name");

但是在添加这个之后，值 Name 甚至在 select2 框中都不可见。

我已经尝试修复它几个小时了，但不知何故找不到正确的解决方案。我敢打赌我错过了一些基本的东西。请帮忙！

--- [编辑]

添加 data 后，即使使用 val 设置值，我也能看到值 Name 但是，如果我重新提交此表单请求中仍然没有值。

.select2('data',{id:"Name",name:"Name","text":"Name"})
.select2('val', "Name")

--- [编辑 2]

在html中我使用select来创建这个元素。

<select class="form-control" name="serie"></select>

Answer 1

多亏了凯文，我才得以解开这个谜题。所以最终我放弃了使用 initSelection。相反，我只是用应该 selected.

的选项填充了 select 标签。

<select class="form-control" id="author" name="author" multiple="multiple">
  <option value="name" selected="selected">name</option>
</select>

从 select2 定义中删除了 initSelection

$("select[name='author']").select2({
    ajax: {
        url: "http://javaendpoit/serie/filter",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                name: params.term,
                page: params.page
            };
        },
        processResults: function (data, page) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.name,
                        name: item.name,
                        id: item.name
                    }
                })
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) {
        return markup;
    },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection,
    tags: true,
    createTag: function (tag) {
        return {
            id: tag.term,
            text: tag.term,
            name: tag.term,
            isNew: true
        };
    }
});

并更改 formatRepoSelection 以使用没有 name 属性的值。

function formatRepoSelection(serie) {
    if (serie.name === undefined) {
        return serie.text;
    } else {
        return serie.name;
    }
}

我想我不能在 formatRepo 中使用 name 属性，可以删除 formatRepoSelection[ 的 if 子句。但这只是一个小修复。

Answer 2

我设法使用 select2 版本 4.0.2 做到这一点：

$("select[name='serie']").data('select2')
    .dataAdapter.select({
        id:"Name",
        name:"Name",
        "text":"Name"
    });

Select2：使用 ajax 数据源时添加和 select 手动值

Select2: Add and select manual values when using ajax data source

jquery

jquery-select2

jquery-select2-4