web-dev-qa-db-fra.com

Comment définir une valeur pour une entrée selectize.js?

J'ai un formulaire à partir duquel j'aimerais copier certaines valeurs par défaut dans les entrées. Les entrées de formulaire utilisent le plugin selectize.js. Je voudrais définir certaines des valeurs de formulaire par programme. La manière standard de faire ceci:

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

ne marche pas.

J'ai essayé quelque chose comme ça mais ça ne marche pas non plus.

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

Des idées? Ça doit être facile :) ça me manque.

javascriptjqueryhtmlselectize.js
50
fat fantasma

Vérifiez les API Docs

Les méthodes addOption(data) et setValue(value) peuvent être ce que vous recherchez.

Update: Vu la popularité de cette réponse, voici quelques informations supplémentaires basées sur les commentaires/requêtes ...

setValue(value, silent) 
Réinitialise les éléments sélectionnés à la valeur donnée.
Si "silent" est vrai (c'est-à-dire: true, 1), aucun événement de modification ne sera déclenché sur l'entrée d'origine.

addOption(data) 
Ajoute une option disponible ou un tableau d'options. Si cela existe déjà, rien ne se passera.
Remarque: cela n'actualise pas la liste déroulante des options (utilisez refreshOptions() pour cela).

En réponse aux options écrasées:
Cela peut se produire en réinitialisant la sélection sans utiliser les options fournies initialement. Si vous n'avez pas l'intention de recréer l'élément, stockez simplement l'objet selectize dans une 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
59
Tomanow

Cela fonctionne pour moi:

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

mais vous devez être vraiment sûr de n'avoir qu'un seul match.

Mise à jour : Cette solution fonctionnant parfaitement, afin de la rendre opérationnelle même s'il existe plusieurs éléments de sélection sur la page, j'ai mis à jour la réponse:

De la manière suivante nous pouvons initialiser:

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

Définir la valeur de manière pragmatique après l’initialisation:

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

La réponse de l'utilisateur 'onlyblank' est correcte. Un petit ajout à cela: vous pouvez définir plus d'une valeur par défaut si vous le souhaitez.

Au lieu de transmettre id à setValue (), transmettez un tableau. Exemple:

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);
10
Shubham

Voici mon code complet en utilisant une balise de recherche à distance. J'espère que c'est utile.

$('#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
    });
}
});
8
VK321

Remarque setValue ne fonctionne que s'il existe déjà un ensemble prédéfini de valeurs pour le contrôle de sélection (par exemple, le champ de sélection), pour les contrôles dans lesquels la valeur pourrait être dynamique (par exemple, l'utilisateur peut ajouter des valeurs à la volée, champ de zone de texte) setValue ça ne marchera pas.

Utilisez createItem functon à la place pour ajouter et définir la valeur actuelle du champ selectize

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
4
Jplus2

juste rencontré le même problème et résolu avec la ligne de code suivante:

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

J'avais le même problème (j'utilise Selectize with Rails et je voulais sélectionner un champ d'association). Je voulais que le nom de l'enregistrement associé apparaisse dans la liste déroulante, mais j'avais besoin que la valeur de chaque option soit l'identifiant du record, puisque Rails utilise la variable value pour définir des associations.

J'ai résolu ce problème en définissant une variable coffeescript de @valueAttr sur la id de chaque objet et une variable de @dataAttr sur la name de l'enregistrement. Ensuite, j'ai examiné chaque option et défini:

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

Il est utile de voir le diff complet: https://github.com/18F/C2/pull/912/files

2
Jessie A. Young

J'avais un problème similaire. Mes données sont fournies par un serveur distant. Je souhaite qu'une valeur soit entrée dans la zone de sélection, mais il n'est pas certain à l'avance que cette valeur soit valide sur le serveur. 

Donc, je veux que la valeur soit entrée dans la case, et je veux que Selectize affiche les options possibles, tout comme si l'utilisateur avait entré la valeur.

J'ai fini par utiliser ce hack (qui n'est probablement pas supporté):

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();
1
johanv

Une réponse simplifiée:

$('#my_input').data('selectize').setValue("Option Value Here");
1
Fala

Commencez par charger le menu déroulant de sélection, puis sélectionnez-le. Cela fonctionnera avec $ (select) normal .val (). 

0
Lakin Mohapatra