Add options to Select2 after inititialzation

问题

This seems like a standard thing to want to do, but I'm struggling to find a clear and simple solution.

I want to be able to add one or more additional options to an already initialized Select2.

I am using an older version of Select2, not sure what the version is off hand though.

回答1:

You can solve most questions involving Select2 in the same way that they would be solved in a standard <select>. In this case, the corresponding <select> question would be: Adding options to select with javascript.

var option = new Option("text", "id");
$("select").append(option);

If you want it to be selected when it is inserted, you can just set the selected property on the new option.

var option = new Option("text", "id");
option.selected = true;

$("select").append(option);
$("select").trigger("change");

Note that I also triggered the change event so that Select2 can know that the selected options have changed.

回答2:

God I should stop to think before posting sometimes.

Its as simple as just adding a new option to the underlying select:

$("#myselect").append($('<option>', {value: 1, text: 'new option'}));

Don't even need to re-initialize the select2.

回答3:

I solved this problem with "Data" property of select2. Firstly, I got data with json and then I create my select2 element with my array as below.

corrCodeArray is my json array.

function fillSelectReportPeriod() {
var corrCodeArray = retrieveCorrCodes();
$(".js-example-basic-multiple").select2({
    maximumSelectionLength: 4,
    data: corrCodeArray
});

}

Note: When I give select2 element name like $("#selectReportPeriod") instead of $(".js-example-basic-multiple") it didn't work so I used class name.

回答4:

This works for me:

$("#company_dealer").val('Newly Selected Dealer').trigger('change');

来源：https://stackoverflow.com/questions/29603958/add-options-to-select2-after-inititialzation

标签

jquery-select2