Question

为什么不在将编程附加选项发送到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
  }

追加前：

追加后：

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

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需要格式化您对表单数据的选择，但您的选择无法在select2数据集合中找到。

$("#subrecursos").append(option);这种方式很好但是你必须$("#subrecursos").val([1,2]).trigger('change')进行多重选择

看一下这个answer，该人请求如何添加select2选项并选择它们。我认为你需要的是一种更健壮的方式

Select2以编程方式附加不在表单中发送的选项

2 个答案: