Select2 programatically append options not send in form

Question

Why not recogonize the form when send the programatically append options to the Select2 element?

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 Append options

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
  }

Before Append:

After Append:

Until here everything is ok, But when send the form , the options are not recognize. When add the tags typing the options are recognize in the form. Why happend this? why only recognize the options typed and not programatically added? Thank you a lot!!

Yes this is ok the append step, the problem is when send the form, append options are not recognize, but the typing added options yes, this has something to do with the select2 plugin I believe, Before you say that first must destroy the select2 elemnt then create a new one? maybe this could work, but i dont find how to do that — Roberto Massimo Patara Brianco, Jan 08 '17 at 03:51

Bindrid · Answer 1 · 2017-01-08T19:00:45.233

I created a simple working one on jsfiddle https://jsfiddle.net/bindrid/dj4tj1ak/ It is coded to remember the selected value if the data is fetched after an item is selected.

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

then for the second part

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

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

The way you append your options $(".select2-selection__rendered").append( is not good for select2 , when you send the form select2 need to format your selection for form data but your selection are no where to be found inside select2 data collection.

$("#subrecursos").append(option); this way is good way but after you must $("#subrecursos").val([1,2]).trigger('change') to make the multiple selection

Take a look at this answer, the person requested how to add select2 option and select them. I think it exactely what u need in a more robust way

edited May 23 '17 at 12:07

Community

1
1

answered Jan 13 '17 at 01:56

greenseed

509
5
10

Yeah I did this to resolve my problem, this is the solution, $("#subrecursos").val([1,2]).trigger('change') – Roberto Massimo Patara Brianco Jan 13 '17 at 02:11

Select2 programatically append options not send in form

2 Answers2