Adding dynamic tags does not work

[francoispluchino]

For 4.0 branch.

When you use the methods val(<data>) or select2('val', <data>) with the options multiple=true and tags=true, The selection displayed contains only the values of the existing select options, without including the new tags.

HTML:

<select id="mydropdown" multiple="multiple" >
  <option value="VAL1">Value 1</option>
  <option value="VAL2" selected="selected">Value 2</option>
  <option value="VAL3">Value 3</option>
</select>

JS:

$('#mydropdown').select2({
  tags: true,
  tokenSeparators: [","]
});

$('#mydropdown').val(["VAL3", "New tag"]).trigger("change");

However, if you created a new tag via the dropdown, and that you delete this tag, The .val() method does work (because the option still exists in the select).

Is it normal that the val method does not create the option in the select?

[kevin-brown]

http://stackoverflow.com/q/29058625/359284

Is it normal that the val method does not create the option in the select?

Yes, this is because the option that you are trying to set the value to does not actually exist.

[francoispluchino]

Thanks for the link, but I already used an equivalent solution. I rephrase my previous question: why are we forced to add manually the option?

If the tags are activated, the update of Select2 should automatically create this option.

[kevin-brown]

It's important to note that the .val() method is created/controlled by jQuery, not Select2. We don't have the ability to overload the .val method and handle setting the value a different way.

why are we forced to add manually the option?

We are forced to manually add the option because jQuery will not automatically create it for you.

We did the equivalent of this in the past with .select2('val', data), but this was removed because explicit is better than implicit in this case. People are used to setting the value of a <select> using .val(), and Select2 aims to be a replacement for <select> boxes. So in the latest version (4.0.0), changes were made that brought Select2 back to its roots as a <select> box replacement. One of the changes happened to be that setting the value of a standard <select> to something invalid results in it being ignored.

[francoispluchino]

It's obvious that we should not override the .val() method. So much for me, I just find that the value passed to the selection:update event (and so in the change.select2 event) contains only the values matched with the options.

Indeed, in this case, my proposal is not possible. But perhaps it would be easier and faster to have an helper for add a new tag directly in JS, because the implementation already exists (creating the option with the good attributes,etc...).

Thank you for your great component.

[clockwiseq]

When I manually add an option to the select, I need to include a custom data attribute. How is that done? When I use AJAX to get the items, this works fine:

processResults: function (data) {
    return {
        results: $.map(data, function (obj) {
            return { 
                id: obj.Id, 
                text: obj.LastName + ', ' + obj.FirstName, 
                company: obj.Company 
            };
        })
    };
}

But I need to load these results back into the select2 as tags upon load and I can't get the extra data property (company) added:

$.each(dtlPatients, function (index, patient) {
    $('#PatientListControl').select2().append('<option value="' + patient.Id 
           + '" data-company="' + patient.Company + '">' + patient.Name + '</option>');
});

$('#PatientListControl').val(selpatlist).trigger('change');

[alexweissman]

@clockwiseq please open this as a new issue.

[clockwiseq]

@alexweissman: Issue Created

[carvajalluis]

Hello @kevin-brown,

We did the equivalent of this in the past with .select2('val', data), but this was removed because explicit is better than implicit in this case.

what was the implicit part of it ? may be the naming was not correctly? the previous function created the option while jquery one does not maybe we should call it addOption or something more meaningful to it, we could keep setting value as it is right now with jquery and you add a new method for appending options.

[sh6210]

In my case, i'm using select2 v3.4.5.

All I had to write,

$("#category_tags").val(${autoTaggingText}).trigger("change")

here #category_tags is my target element.