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.
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 (utilisezrefreshOptions()
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
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");
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);
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
});
}
});
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
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");
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
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();
Une réponse simplifiée:
$('#my_input').data('selectize').setValue("Option Value Here");
Commencez par charger le menu déroulant de sélection, puis sélectionnez-le. Cela fonctionnera avec $ (select) normal .val ().