Comment modifier la valeur sélectionnée de la liste déroulante select2 avec JqGrid?


178

J'utilise la démo select2 d'Oleg , mais je me demande s'il serait possible de changer la valeur actuellement sélectionnée dans le menu déroulant.

Par exemple, si les quatre valeurs chargées étaient: "Any", "Fruit", "Vegetable", "Meat"et que la liste déroulante était par défaut "Any", comment pourrais-je changer cela en "Fruit"dans l'événement JqGrid loadComplete?

Est-ce possible?

Réponses:


407

Pour la version select2> = 4.0.0

Les autres solutions peuvent ne pas fonctionner, mais les exemples suivants devraient fonctionner.

Solution 1: provoque le déclenchement de tous les événements de modification attachés, y compris select2

$('select').val('1').trigger('change');

Solution 2: provoque le déclenchement de l'événement de changement JUST select2

$('select').val('1').trigger('change.select2');

Voir ce jsfiddle pour des exemples de ceux-ci. Merci à @minlare pour la solution 2.

Explication:

Disons que j'ai un meilleur ami sélectionner avec les noms des gens. Donc Bob, Bill et John (dans cet exemple, je suppose que la valeur est la même que le nom). J'initialise d'abord select2 sur mon select:

$('#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-best-friend').val('').trigger('change');

Ou disons que je demande au système de sélectionner 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');  

Remarques sur le site Web Select 2 (voir Méthodes obsolètes et supprimées ) qui pourraient être utiles pour 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 avez 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');

8
C'est la bonne réponse: cela fonctionne à la fois en mono-sélection et en multi-sélection
Giovanni Di Milia

4
C'est une solution acceptable uniquement si aucune action personnalisée n'est liée à l' changeévénement (comme recharger le formulaire). Sinon, ces actions seraient appelées de manière redondante lorsqu'elles sont déclenchées change().
van_folmert

Si cela ne fonctionne pas correctement, ajoutez un setTimeout: setTimeout (function () {$ ("select"). Val ("1"). Trigger ("change");}, 1000);
Abel

@van_folmert J'ai le même problème. Idéalement, je souhaite modifier ce qui est affiché comme sélectionné, sans déclencher un événement (puisque j'en ai un personnalisé lié à onChange)
onebree

1
Voir ma réponse ci-dessous pour un exemple de résolution du problème
@van_folmert

135

En regardant les documents select2, vous utilisez ce qui suit pour obtenir / définir la valeur.

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

@PanPipes a souligné que cela avait changé pour 4.x (allez lui donner un vote positif ci-dessous). vals'appelle maintenant directement

$("#select").val("CA");

Ainsi, dans le loadCompletejqGrid, vous pouvez obtenir la valeur que vous recherchez, puis définir la valeur de la boîte de sélection.

Avis de la documentation

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 passez dans val () en l'objet complet dont il a besoin pour rendre la sélection. Si vous vous attachez à un élément de sélection, cette fonction est déjà fournie pour vous.


Ne semble pas fonctionner avec la démo que je regarde. Je ne sais pas pourquoi, cela peut être lié à la façon dont il se connecte à JqGrid.
Adam K Dean

1
Mise à jour de la réponse. Il semble que vous deviez ajouter manuellement cette fonction à l'initialisation de select2 afin qu'il sache comment gérer l' valappel.
Jack

1
@AdamKDean: On peut tester en plus si <select>converti en select2contrôle en testant l'existence de la classe select2-offscreensur le <select>. Tous les éléments de la barre d'outils de recherche ont un identifiant qui commence par le gs_préfixe et porte le nom comme dans colModel. Vous pouvez utiliser getGridParampour obtenir colModel.
Oleg

Merci, j'ai réussi à obtenir les informations du filtre, j'ai juste besoin d'un moyen de le définir après que la barre de filtre soit recréée avec la select2sélection. Je vais jeter un autre coup d'œil aujourd'hui, peut-être qu'avec des yeux neufs, je peux le réparer. Merci encore. Mise à jour: encapsuler le code dans une vérification booléenne a résolu le problème que j'avais, bien que cela ait arrêté d'actualiser la barre de recherche plutôt que de sélectionner à nouveau l'élément précédent.
Adam K Dean


32
this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

cela devrait être utile.


3
Exemple de valeurs multiples: this. $ ("# YourSelector"). Select2 ("data", [{id: 1, text: "Some Text"}, {id: 2, text: "Some Other Text"}]);
RodneyRd

18

Cela devrait être encore plus facile.

$("#e1").select2("val", ["View" ,"Modify"]);

Mais assurez-vous que les valeurs que vous passez sont déjà présentes dans le HTMl


17

Si vous souhaitez ajouter un nouveau value='newValue'et text='newLabel', vous devez ajouter ce code:

  1. Ajouter une nouvelle option à <select>:

    var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>";
    $(selLocationID).html(opt);
    
  2. Déclencher le <select>changement à la valeur sélectionnée:

    $(selLocationID).val('newValue').trigger("change");

Je trouve cela plus propre que de jouer avec les 'données' de select2 :) Changez le dom, laissez select2 comprendre le reste.
Paulj

Je teste sur Safari, et c'est la seule solution qui fonctionne réellement. Les autres sont plus éloquents et je les préférerais, mais plus que tout, je préfère travailler le code. Et c'est ça. :)
David

Merci un million pour ça! Je travaille avec sélectionnez 2 boîtes où les deux boîtes sont remplies avec Ajax et j'ai utilisé des propriétés de données supplémentaires pour la première boîte pour définir la valeur de la seconde en utilisant ceci. Encore merci!!!!
Sam

16

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");

12

Vous avez deux options - comme l'indique la réponse @PanPipes, vous pouvez effectuer les opérations suivantes.

$(element).val(val).trigger('change');

Il s'agit d'une solution acceptable uniquement si aucune action personnalisée n'est liée à l'événement de modification. La solution que j'utilise dans cette situation est de déclencher un événement spécifique à select2 qui met à jour la sélection affichée à select2.

$(element).val(val).trigger('change.select2');

Oui, c'est la meilleure solution globale. Vraiment, je pense que Select2 devrait déclencher automatiquement l'événement interne 'change.select2' pour mettre à jour l'affichage lorsque la valeur est modifiée. Mais cela fournit au moins un moyen simple de mettre à jour l'affichage pour qu'il corresponde à la nouvelle valeur, sans déclencher des gestionnaires d'événements de modification personnalisés.
DaveInMaine

this '$ (élément) .val (val) .trigger (' change.select2 ');' travaillé pour moi. Merci @minlare.
Ray

9

Ayant quelques problèmes avec la définition d'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 d'option "E" string1 / option:

$('#select').val("E").change(); // you must enter the Value instead of the string

Espère que cela aide quelqu'un aux prises avec le même problème.


5

si vous souhaitez sélectionner une seule valeur, utilisez $('#select').val(1).change()

si vous souhaitez sélectionner plusieurs valeurs, définissez la valeur dans le tableau afin que vous puissiez utiliser ce code $('#select').val([1,2,3]).change()


cela ne fonctionnera pas si vous entrez une chaîne entre crochets.
Utkarsh Pandey

5

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 également l'affichage du texte pour le select2.

Tiré de https://select2.github.io/announcements-4.0.html#removed-methods


Essayez de déclencher ('change.select2'). Trigger ('select2: select'); si juste le changement ne suffit pas
Tebe

4

Mon code attendu:

$('#my-select').val('').change();

fonctionne parfaitement grâce à @PanPipes pour l'utile.


4

fais ça

 $('select#id').val(selectYear).select2();

Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant la raison et / ou la manière dont ce code répond à la question améliore sa valeur à long terme.
rollstuhlfahrer

Je n'ai pas de connaissances sur JqGrid mais avec ce code, vous pouvez changer la valeur de select2 de manière simple
Jaskaran singh Rajal

2

si vous avez une source de données ajax, veuillez vous référer à ceci pour éviter les bogues

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 l'ajout 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
        }
    });
});

1

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 trouvé un fuseau horaire et que vous vouliez le définir, mais que les valeurs y figurent 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'); 

0
// 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


0

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.