Select2 以编程方式附加选项未以形式发送答案

【问题标题】：Select2 programatically append options not send in formSelect2 以编程方式附加选项未以形式发送
【发布时间】：2017-01-08 03:17:27
【问题描述】：

为什么以编程方式将附加选项发送到 Select2 元素时无法识别表单？

HTML

Jquery Select2

$('#subrecursos').select2({
            width: null,
            multiple: true,
            allowClear: true,
            tags: true,
            "language": {
                "noResults": function () {
                    return "<i>Please Add Subresource as 'Name'|'Cost'|'Price'|'Capacity'(19V|50|70|2 or 20V)</i>";
                }
            },
            escapeMarkup: function (markup) {
                return markup;
            },
            id: function (object) {
                return object.text;
            },
            //Allow manually entered text in drop down.
            createSearchChoice: function (term, data) {
                if ($(data).filter(function () {
                  return this.text.localeCompare(term) === 0;
                }).length === 0) {
                    return { id: term, text: term };
                }
            }

        });

Jquery 附加选项

for (var i = 0; i < parseInt($("#limitsub").val()) ; i++)
  {            
    var valsub = (i + 1) + '-' + $("#nsubcant").val() + '|||' + $("#cantsub").val();
    var option='<option value="' + valsub + '" >' + valsub + '</option>'; 
    $("#subrecursos").append(option);//append the option
    $(".select2-selection__rendered").append('<li class="select2-selection__choice" title="' + valsub + '"><span class="select2-selection__choice__remove" role="presentation">×</span>' + valsub + '</li>');
    //append the tags
  }

附加前：

追加后：

直到这里一切都好，但是发送表格时，选项无法识别。添加标签时，键入选项会在表单中识别。为什么会这样？为什么只识别键入的选项而不以编程方式添加？非常感谢！！

【问题讨论】：

看看jsfiddle.net/bindrid/mmh2y85h/1
是的，追加步骤没问题，问题是发送表单时，追加选项无法识别，但是输入添加的选项是的，我相信这与 select2 插件有关，之前你说首先必须销毁select2元素然后创建一个新元素？也许这可以工作，但我不知道该怎么做

标签： jquery forms jquery-select2 jquery-select2-4

【解决方案1】：

附加选项$(".select2-selection__rendered").append( 的方式不适合 select2 ，当您发送表单时 select2 需要格式化表单数据的选择，但您的选择在 select2 数据集合中找不到。

$("#subrecursos").append(option);这个方法不错，但是之后你必须$("#subrecursos").val([1,2]).trigger('change')进行多选

看看这个answer，该人要求如何添加select2选项并选择它们。我认为这正是你需要的更强大的方式

【讨论】：

是的，我这样做是为了解决我的问题，这就是解决方案，$("#subrecursos").val([1,2]).trigger('change')

【解决方案2】：

我在 jsfiddle https://jsfiddle.net/bindrid/dj4tj1ak/ 上创建了一个简单的工作，如果在选择项目后获取数据，它被编码为记住选定的值。

       var sel2Options =  {
                width: null,
                multiple: true,
                allowClear: true,
                tags: true,
                "language": {
                    "noResults": function () {
                        return "<i>Please Add Subresource as 'Name'|'Cost'|'Price'|'Capacity'(19V|50|70|2 or 20V)</i>";
                    }
                },
                escapeMarkup: function (markup) {
                    return markup;
                },
                id: function (object) {
                    return object.text;
                },
                //Allow manually entered text in drop down.
                createSearchChoice: function (term, data) {
                    if ($(data).filter(function () {
                      return this.text.localeCompare(term) === 0;
                    }).length === 0) {
                        return { id: term, text: term };
                    }
                }

           };
           $('#subrecursos').select2(sel2Options);

然后是第二部分

           for (var i = 0; i < parseInt($("#limitsub").val()) ; i++) {
               var valsub = (i + 1) + '-' + $("#nsubcant").val() + '|||' + $("#cantsub").val();
               var option = '<option value="' + valsub + '" >' + valsub + '</option>';
               $("#subrecursos").append(option);//append the option

               //append the tags
           }

           $('#subrecursos').select2("destroy");
           $('#subrecursos').select2(sel2Options);

【讨论】：