Select2 values are shown, but is actually empty

Question

This is my select2 input.

$(document).ready(function () {
    $('#regular').select2({
        placeholder: 'Select any two from the options',
        maximumSelectionLength: 2,
    });
});

I've loaded the select2.js here. and I am fetching data from ajax call.

options = data.regular.split(",");

this option has 3 values, I want to select the first two from the array. Hence My code is..

option = [options[0],options[1]];
$("#regular").val(option).trigger('change');

Now the options are showing in the list. But if I click and select from the input, everything resets and I have to select again. And if without changing anything I want to submit, the field shows required.

user_11969707 · Answer

here the code works because the values from the server are identical to two of the values of the Option elements

So maybe your problem is the option string is not already existing

, Also it's case sensitive so "arabic" !== "Arabic" arabic will not work

either change in option tag or change the value string from JSON response

Hope this Helps

$(document).ready(function() {

  mySelect = $('#regular').select2({
    placeholder: 'Select any two from the options',
    maximumSelectionLength: 2
  });

  options = 'Economics,Arabic,Education'.split(',');
  option = [options[0],options[1]];

  //simulate ajax using timeout
  setTimeout(function() {
    mySelect.val(option).trigger("change");
  }, 1000);

});

Select2 values are shown, but is actually empty

1 Answers