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

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?

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

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.

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 passez sont déjà présentes dans le HTMl

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

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

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.

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()

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

Mon code attendu:

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

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

fais ça

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

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

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

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

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