How do I set the selectize.js options list programmatically?

Question

I know how to set the optionList on Initiliaztion but how do I set it programmatically?

I have an inviteList array:

$("#select-invite").options(inviteList);

Blamed

Answer 1

You can use load method to set options via programmatic API. You may also want to call clear and clearOptions methods to reset selected values and old options.

Here is how to put it all together:

var selectize = $("#select-invite")[0].selectize;
selectize.clear();
selectize.clearOptions();
selectize.load(function(callback) {
    callback(inviteList);
});

Please note that inviteList should be an array of objects that have properties configured in valueField and labelField options when select was initialized. For example, here is how inviteList should look like with default valueField and labelField options:

var inviteList = [
    {
        text: 'Option One',
        value: 1
    },
    {
        text: 'Option Two',
        value: 2
    }
];

Iodoform

clearOptions() calls clear(), so no need to manually call clear()? – Marxism

"text" and "value" are all about what has been set up as "labelField" and "valueField" in the configuration. – Emmalynne

var selectize = $("#select-invite")[0].selectize; returns undefined ? – Shoat

@SohamBhaumik check https://mcmap.net/q/342475/-how-to-clear-a-selected-value-in-selectize-js-dropdown above answer is partly correct if you have not already applied selectize on element – Intertwist

Thanks! This is the only solution I was able to find. These methods were NOT in ANY documentation of this plugin (that I could find). Kind of a shame, considering this is a decent plugin. – Aarika

Answer 2

As far as I know there's no method for adding multiple options through the API. You'll need to write a loop that uses the addOption() method. You'll need to get the control instance of selectize before trying to use the API. Take a look at the example below, from the Github examples:

// Create the selectize instance as usual 
var $select = $('#select-tools').selectize({
    maxItems: null,
    valueField: 'id',
    labelField: 'title',
    searchField: 'title',
    options: [
        {id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'},
        {id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'},
        {id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
    ],
    create: false
});

// Get the selectize control instance
var control = $select[0].selectize;

// Add the new option when a button is clicked
// Remove the click event and put the addOption call in a loop
$('#button-addoption').on('click', function() {
        control.addOption({
        id: 4,
        title: 'Something New',
        url: 'http://google.com'
    });
});

From the Github examples.

Eggplant

FYI, today, addOption() kept the singular name but now accepts an array of options. – Billowy

Downvoter, please explain the downvote. A downvote with explanation is of no value to anyone. – Eggplant

I guess because the way to do it is via the load setting, as written by byte255; this allows to not have knowledge about Selectize internals. In fact, your way is good too, but (I think) it misses to call refreshOptions after the options have been added. – Bookseller

Answer 3

I know this is an old question but as of 2021 I have found this to be the simplest way to achieve this:

Building on @byte255's answer above, you only need to use the clearOptions method and addOption method.

let selectize = $("#select-invite")[0].selectize;

selectize.clearOptions();

let newOptions = [
    {
        text: 'Option One',
        value: 1
    },
    {
        text: 'Option Two',
        value: 2
    }
]

selectize.addOption(newOptions);

Dachy