CODEWITHSUNDEEP
jquery-select2
Stewart Alan
Stewart Alan

Reputation: 1643

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.

Upvotes: 10

Views: 29645

Answers (4)

Sinan Eldem
Sinan Eldem

Reputation: 5728

This works for me:

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

Upvotes: -1

Engin Aydogdu
Engin Aydogdu

Reputation: 190

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.

Upvotes: 1

Kevin Brown-Silva
Kevin Brown-Silva

Reputation: 41671

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.

Upvotes: 24

Stewart Alan
Stewart Alan

Reputation: 1643

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.

Upvotes: 11

Related Questions