example - ¿Cómo configuro la opción selectize.js lista programáticamente

selectize.js options

Question

Sé cómo configurar el optionList en Initiliaztion pero ¿cómo lo configuro programáticamente? Tengo una matriz de inviteList.

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

Answer 1

Por lo que sé, no hay ningún método para agregar múltiples opciones a través de la API. Deberá escribir un bucle que use el método addOption() . Deberá obtener la instancia de control de selectize antes de intentar utilizar la API. Eche un vistazo al siguiente ejemplo, de los ejemplos de Github:

// 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''
    });
});

De los ejemplos de Github .

Answer 2

Puede usar el método de carga para establecer opciones a través de la API programática . También puede llamar a los métodos de borrar y borrar opciones para restablecer los valores seleccionados y las opciones antiguas.

Aquí es cómo poner todo junto:

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

Tenga en cuenta que inviteList debe ser una matriz de objetos que tienen propiedades configuradas en las opciones valueField y labelField cuando se inicializó la selección. Por ejemplo, aquí es cómo debe verse inviteList con las opciones predeterminadas de valueField y labelField:

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