J'utilise la démo select2 de Oleg, mais je me demande s'il serait possible de modifier la valeur actuellement sélectionnée dans le menu déroulant.
Par exemple, si les quatre valeurs chargées sont: "Any", "Fruit", "Vegetable", "Meat"
et que la liste déroulante est définie par défaut sur "Any"
, comment pourrais-je la remplacer par "Fruit"
dans l'événement JqGrid loadComplete
?
Est-ce possible?
Pour select2 version> = 4.0.0
Les autres solutions pourraient ne pas fonctionner, mais les exemples suivants devraient fonctionner.
$('select').val('1').trigger('change');
$('select').val('1').trigger('change.select2');
Voir ceci jsfiddle pour des exemples. Merci à @minlare pour Solution 2.
Supposons que je sélectionne un meilleur ami avec les noms des personnes. Donc, Bob, Bill et John (dans cet exemple, je suppose que la valeur est la même que le nom). D'abord j'initialise select2 sur ma sélection:
$('#my-best-friend').select2();
Maintenant, je sélectionne manuellement Bob dans le navigateur. Ensuite, Bob fait quelque chose de méchant et je ne l'aime plus. Le système désélectionne donc Bob pour moi:
$('#my-select').val('').trigger('change');
Ou alors, je fais en sorte que le système sélectionne le suivant dans la liste au lieu de Bob:
// I have assume you can write code to select the next guy in the list
$('#my-best-friend').val('Bill').trigger('change');
Notes sur le site Web Select 2 (voir Méthodes obsolètes et supprimées ) qui pourraient être utiles à d’autres:
.select2 ('val') La méthode "val" est obsolète et sera supprimée dans Select2 4.1. La méthode obsolète n'inclut plus le paramètre triggerChange.
Vous devez plutôt appeler directement .val sur l'élément sous-jacent. Si vous aviez besoin du deuxième paramètre (triggerChange), vous devez également appeler .trigger ("change") sur l'élément.
$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');
En regardant select2 docs , vous utilisez le texte ci-dessous pour obtenir/définir la valeur.
$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value
@PanPipes a fait remarquer que cela avait changé pour la version 4.x (allez lui jeter un vote positif ci-dessous). val
est maintenant appelé directement
$("#select").val("CA");
Ainsi, dans la loadComplete
de jqGrid, vous pouvez obtenir la valeur recherchée, puis définir la valeur de la zone de sélection.
Avis du docs
Notez que pour utiliser cette méthode, vous devez définir la fonction initSelection dans les options afin que Select2 sache comment transformer l'ID de l'objet que vous transmettez dans val () à l'objet complet nécessaire au rendu de la sélection. Si vous attachez un élément select, cette fonction vous est déjà fournie.
this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });
cela devrait être utile.
Cela devrait être encore plus facile.
$("#e1").select2("val", ["View" ,"Modify"]);
Mais assurez-vous que les valeurs que vous transmettez sont déjà présentes dans le HTMl
Je voulais juste ajouter une deuxième réponse. Si vous avez déjà rendu le select en tant que select2, vous devrez le refléter dans votre sélecteur comme suit:
$("#s2id_originalSelectId").select2("val", "value to select");
Si vous souhaitez ajouter de nouveaux value='newValue'
et text='newLabel'
, vous devez ajouter ce code:
Ajouter une nouvelle option à <select>
:
var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>";
$(selLocationID).html(opt);
Le déclencheur <select>
passe à la valeur sélectionnée:
$(selLocationID).val('newValue').trigger("change");
Vous avez deux options - comme la réponse de @PanPipes indique que vous pouvez procéder comme suit.
$(element).val(val).trigger('change');
Cette solution n'est acceptable que si aucune action personnalisée n'est liée à l'événement change. La solution que j'utilise dans cette situation est de déclencher un événement spécifique à select2 qui met à jour la sélection select2.
$(element).val(val).trigger('change.select2');
Avoir quelques problèmes avec définir une option de chaîne sélectionnée dans un select2:
Avec l'option: "option string1/option" utilisée:
$('#select').val("string1").change();
MAIS avec une option avec une valeur: valeur de l’option "E" chaîne1/option:
$('#select').val("E").change(); // you must enter the Value instead of the string
J'espère que cela aidera quelqu'un aux prises avec le même problème.
si vous voulez sélectionner une seule valeur, utilisez $('#select').val(1).change()
si vous voulez sélectionner plusieurs valeurs, définissez la valeur dans array pour pouvoir utiliser ce code $('#select').val([1,2,3]).change()
Pour V4 Select2 si vous souhaitez modifier à la fois la valeur de select2 et la représentation textuelle de la liste déroulante.
var intValueOfFruit = 1;
var selectOption = new Option("Fruit", intValueOfFruit, true, true);
$('#select').append(selectOption).trigger('change');
Cela définira non seulement la valeur dans les coulisses, mais aussi l'affichage du texte pour le select2.
Extrait de https://select2.github.io/announcements-4.0.html#removed-methods
Mon code attendu:
$('#my-select').val('').change();
fonctionne parfaitement grâce à @PanPipes pour l’utile.
si vous avez une source de données ajax, merci de vous référer à ceci pour des bugs gratuits
https://select2.org/programmatic-control/add-select-clear-items
// Configurer le contrôle Select2
$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});
// Récupère l'élément présélectionné et ajoute au contrôle
var studentSelect = $('#mySelect2');
$.ajax({
type: 'GET',
url: '/api/students/s/' + studentId
}).then(function (data) {
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');
// manually trigger the `select2:select` event
studentSelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
fais ça
$('select#id').val(selectYear).select2();
si vous souhaitez définir un élément sélectionné lorsque vous connaissez le texte de la liste déroulante et que vous ne connaissez pas la valeur, voici un exemple:
Supposons que vous ayez défini un fuseau horaire et que vous souhaitiez le définir, mais que les valeurs contiennent time_zone_id
.
var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
var $select2 = $('#time-zone');
var selected = $select2.find("option:contains('"+timeZone+"')").val();
$select2.val(selected).trigger('change.select2');
vous pouvez simplement utiliser la méthode get/set pour définir la valeur
$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value
ou vous pouvez faire ceci:
$('#select').val("E").change(); // you must enter the Value instead of the string
// Set up the Select2 control
$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});
// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
type: 'GET',
url: '/api/students/s/' + studentId
}).then(function (data) {
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');
// manually trigger the `select2:select` event
studentSelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
Police: Sélectionnez 2 documentation