web-dev-qa-db-fra.com

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

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?

jqueryjqgridui-select2
162
Adam K Dean

Pour select2 version> = 4.0.0

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

Solution 1: tous les événements de modification attachés sont déclenchés, y compris select2.

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

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

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

Voir ceci jsfiddle pour des exemples. Merci à @minlare pour Solution 2.

Explication:

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

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.

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

cela devrait être utile.

30
Yasser

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

16
Neelu

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

Si vous souhaitez ajouter de nouveaux 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. Le déclencheur <select> passe à la valeur sélectionnée:

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

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

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.

9
Aldodzb

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

6
Utkarsh Pandey

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

5
Rmalmoe

Mon code attendu: 

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

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

4
Abdullah Sheik Davood

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

fais ça 

 $('select#id').val(selectYear).select2();
2
Jaskaran singh Rajal

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');
0
Yevgeniy Afanasyev

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
0
Foram Thakral
// 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
CodeNoob