SELECT2 -> Add data without replacing content

I've had a look at some other threads but nothing quite as specific. It's not really something that I would assume is hard but I'm not sure how about to do it.

Currently I'm using Select2 for a tagging system and next to it I have suggested tags which users would be able to click on and it will add to the box.

Instead, each tag is replacing the content and adding itself.

I need the adding to be appended into the box without replacing what's already in there.

Here's my code:

$(document).on('click', ".tag1", function () {
      var value = $(".tag1").html();
$(document).on('click', ".tag2", function () {
      var value = $(".tag2").html();

The data is being pulled through via AJAX with a span around each suggested tag.

Hope I'm clear enough.

Summary: I want to be able to click on each 'tag' and for it to be added, instead it replaces what was already in the box.




You should be able to do that with simple:

var test = $('#test');

    multiple: true,
    width: "300px"
var data = $(test).select2('data');
$(test).select2("data", data, true); // true means that select2 should be refreshed

Working example:


You are replacing the value with val(mystuff). You want to do the following:

  1. Get the current data in the input with val()

    var dataOld = $('#selectPretty').val();

  2. Append the new data with something like*

    var dataNew = dataOld.push(value);

  3. Set the input data to new data:


*This assumes that val() returns an array



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.