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
}
];