javascript - ¿Cómo establecer un valor para una entrada selectize.js?

jquery html

Question

Tengo un formulario desde el que me gustaría copiar algunos valores predeterminados en las entradas. Las entradas de formulario están utilizando el complemento selectize.js. Me gustaría establecer algunos de los valores de forma programáticamente. La forma estándar de hacer esto:

$("#my_input").val("My Default Value");

No funciona.

He intentado algo como esto pero tampoco funciona.

var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
selectize.setValue("My Default Value"); 

¿Algunas ideas? Tiene que ser fácil :) Me lo estoy perdiendo.

Answer 1

Aquí está mi código completo usando la etiqueta de la búsqueda remota. Espero que esto sea de ayuda.

$(''#myInput'').selectize({
valueField: ''id'',
labelField: ''name'',
searchField: ''name'',
options: [],
delimiter: '','',
persist: false,
create: false,
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: ''/api/all_cities.php'',
type: ''GET'',
dataType: ''json'',
data: {
name: query,
},
error: function() {
callback();
},
success: function(res) {
callback(res);
}
});
},
onInitialize: function(){
var selectize = this;
$.get("/api/selected_cities.php", function( data ) {
selectize.addOption(data); // This is will add to option
var selected_items = [];
$.each(data, function( i, obj) {
selected_items.push(obj.id);
});
selectize.setValue(selected_items); //this will set option values as default
});
}
});

Answer 2

Estaba teniendo el mismo problema. Estoy usando Selectize with Rails y quería seleccionar un campo de asociación. Quería que el nombre del registro asociado apareciera en el menú desplegable, pero necesitaba que el valor de cada opción fuera la identificación del registro, ya que Rails utiliza el value para establecer asociaciones.

Resolví esto estableciendo una var de @valueAttr de @valueAttr al id de cada objeto y una var de @dataAttr al name del registro. Luego pasé por cada opción y configuré:

 opts.labelField = @dataAttr
opts.valueField = @valueAttr

Ayuda a ver el dif completo: https://github.com/18F/C2/pull/912/files

Answer 3

Esto funciona para mí:

var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
selectize.setValue(selectize.search("My Default Value").items[0].id);

Pero tienes que estar realmente seguro de que solo tienes una coincidencia.

Actualización : como esta solución funciona a la perfección, para que funcione, incluso si hay varios elementos de selección en la página, he actualizado la respuesta:

De la siguiente manera podemos inicializar:

$(''select'').each(function (idx) {
var selectizeInput = $(this).selectize(options);
$(this).data(''selectize'', selectizeInput[0].selectize);
});

Valor de configuración pragmáticamente después de la inicialización:

var selectElement = $(''#unique_selector'').eq(0);
var selectize = selectElement.data(''selectize'');
if (!!selectize) selectize.setValue("My Default Value");

Answer 4

La nota setValue solo funciona si ya hay un conjunto predefinido de valores para el control de selección (ej. Campo de selección), para los controles donde el valor podría ser dinámico (ej. El usuario puede agregar valores sobre la marcha, campo de cuadro de texto) setValue no va a trabajo.

Utilice la función createItem para agregar y configurar el valor actual del campo de selección

ex.

$selectize[ 0 ].selectize.clear(); // Clear existing entries
for ( var i = 0 ; i < data_source.length ; i++ ) // data_source is a dynamic source of data
$selectize[ 0 ].selectize.createItem( data_source[ i ] , false ); // false means don''t trigger dropdown

Answer 5

La respuesta del usuario ''onlyblank'' es correcta. Una pequeña adición a eso: puede configurar más de 1 valores predeterminados si lo desea.

En lugar de pasar la identificación a setValue (), pase una matriz. Ejemplo:

var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
var yourDefaultIds = [1,2]; # find the ids using search as shown by the user onlyblank
selectize.setValue(defaultValueIds);

Answer 6

Primero cargue el menú desplegable de selección y luego selecciónelo. Funcionará con normal $ (select) .val ().

Answer 7

Revise los documentos API

Los métodos addOption(data) y setValue(value) pueden ser lo que está buscando.

Actualización : al ver la popularidad de esta respuesta, aquí hay información adicional basada en comentarios / solicitudes ...

setValue(value, silent)
Restablece los elementos seleccionados al valor dado.
Si " silencioso " es verdadero (es decir, true , 1 ), no se activará ningún evento de cambio en la entrada original.

addOption(data)
Agrega una opción disponible, o una matriz de opciones. Si ya existe, no pasará nada.
Nota: esto no actualiza la lista desplegable de opciones (use refreshOptions() para eso).

En respuesta a las opciones que se sobrescriben:
Esto puede suceder reiniciando la selección sin usar las opciones que proporcionó inicialmente. Si no tiene la intención de recrear el elemento, simplemente almacene el objeto de selección en una variable:

// 1. Only set the below variables once (ideally)
var $select = $(''select'').selectize(options); // This initializes the selectize control
var selectize = $select[0].selectize; // This stores the selectize object to a variable (with name ''selectize'')
// 2. Access the selectize object with methods later, for ex:
selectize.addOption(data);
selectize.setValue(''something'', false);
// Side note:
// You can set a variable to the previous options with
var old_options = selectize.settings;
// If you intend on calling $(''select'').selectize(old_options) or something

Answer 8

Tuve un problema similar. Mis datos son proporcionados por un servidor remoto. Quiero que se ingrese algún valor en el cuadro de selección, pero no es seguro de antemano si este valor es válido en el servidor.

Así que quiero que el valor se ingrese en el cuadro, y quiero seleccionar para mostrar las opciones posibles solo si el usuario ha ingresado el valor.

Terminé usando este truco (que probablemente no es compatible):

var $selectize = $("#my_input").selectize(/* settings with load*/);
var selectize = $select[0].selectize;
// get the search from the remote server
selectize.onSearchChange(''my value'');
// enter the input in the input field
$selectize.parent().find(''input'').val(''my value'');
// focus on the input field, to make the options visible
$selectize.parent().find(''input'').focus();

Answer 9

acaba de encontrar el mismo problema y lo resolvió con la siguiente línea de código:

selectize.addOption({text: "My Default Value", value: "My Default Value"});
selectize.setValue("My Default Value");