Select2 以编程方式附加选项不以形式发送

Question

为什么在将编程附加选项发送到 Select2 元素时不识别表单？

Html

Jquery 选择 2

$('#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
  }

追加之前：

追加后：

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

Answer 1

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

Answer 2

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

$("#subrecursos").append(option); 这种方法是好方法，但是之后你必须 $("#subrecursos").val([1,2]).trigger('change') 来制作倍数 selection

看看这个 answer，有人问如何添加 select2 选项和 select 它们。我认为这正是您所需要的更强大的方式

Select2 以编程方式附加选项不以形式发送

Select2 programatically append options not send in form

forms

jquery

jquery-select2

jquery-select2-4