web-dev-qa-db-fra.com

Définition des valeurs initiales à la charge avec Select2 avec Ajax

J'ai select2 contrôles mis en place avec Ajax (avoir à la fois simple et multiple). J'essaie d'avoir des valeurs lors du chargement de la page, mais je ne parviens pas à le faire fonctionner cependant. Mon code pour select2 est donné ci-dessous:

function AjaxCombo(element, url, multival ){  // multival = true or false
  multival = multival || false;
  $(element).select2({
   minimumInputLength: 2,
   multiple: multival,
   separator: '|',
   ajax: {
     url: url,
     dataType: 'json',
     data: function (term, page) {
        var targetname = $(this).attr('name');
        var target = targetname.slice(targetname.indexOf("[")+1, targetname.indexOf("]"));
       return {
         targettype: "search",
         target: target,
         search: term
       };
     },
     results: function (data, page) {
       return { results: data };
     }
   }
 });
}
AjaxCombo(".ajaxselect", "includes/linkedcontrol.php", false);
AjaxCombo(".ajaxmultiselect", "includes/linkedcontrol.php", true);

Le combo Ajax fonctionne bien, je ne rencontre des difficultés que lors de la charge initiale. J'ai essayé ce code ci-dessous mais je ne pouvais pas le faire fonctionner:

initSelection : function (element, callback) {
    var elementText = $(element).attr('data-initvalue');
    callback(elementText);
}

Mon HTML de php est retourné comme ci-dessous:

<input name='header[country]' class='ajaxselect'  data-initvalue='[{"id":"IN","name":"India"}]' data-placeholder='Select Country' value='' />

Je vois que les valeurs sont renseignées à partir de php, seul mon jquery a des problèmes. Mes valeurs dans le contrôle apparaissent sous la forme US | United States of America. Je suppose que j'ai édité la source select2 pour obtenir ce format par défaut sans utiliser l'option de formatage.

Quelqu'un peut-il s'il vous plaît m'aider à renseigner les valeurs par défaut? Merci d'avance.

EDIT: Cette question concerne Select2 version <4.0. Cette option est supprimée de la v4.0 et est beaucoup plus simple maintenant.

jqueryajaxjquery-select2
34
Ravi

La fonction que vous spécifiez sous la forme initSelection est appelée avec l'argument value initial. Donc, si value est vide, la fonction n'est pas appelée.
Lorsque vous spécifiez value='[{"id":"IN","name":"India"}]' au lieu de data-initvalue, la fonction est appelée et la sélection peut être initialisée.

5
user1983983

Peut-être que ce travail pour vous !! Cela fonctionne pour moi ...

initSelection: function (element, callback) {

            callback({ id: 1, text: 'Text' });
}

Vérifiez très bien que le code est correctement orthographié, mon problème était dans la initSelection, j'avais initselection

24
JD - DC TECH

Mis à jour vers la nouvelle version:

Essayez cette solution à partir d’ici http://jsfiddle.net/EE9RG/430/

$('#sel2').select2({
multiple:true,
ajax:{}}).select2({"data": 
     [{"id":"2127","text":"Henry Ford"},{"id":"2199","text":"Tom Phillips"}]});
15
MKK

Une façon très étrange de transmettre des données. Je préfère obtenir une chaîne/un objet JSON du serveur, puis attribuer des valeurs et d'autres éléments.

Quoi qu’il en soit, quand vous faites cette var elementText = $(element).attr('data-initvalue'); vous obtenez ce [{"id":"IN","name":"India"}]. Ce résultat, vous devez le PARTER comme suggéré ci-dessus afin d’obtenir les valeurs réelles pour id ("IN") et nom ("India"). Maintenant, il y a deux scénarios, Multi-select & Single-value Select2.

Valeurs uniques:

$(element).select2({
    initSelection : function (element, callback) {
        var data = {id: "IN", text: "INDIA"};
        callback(data);
    }//Then the rest of your configurations (e.g.: ajax, allowClear, etc.)
});

Sélection multiple

$("#tags").select2({
    initSelection : function (element, callback) {
        var countryId = "IN"; //Your values that somehow you parsed them
        var countryText = "INDIA";

        var data = [];//Array

        data.Push({id: countryId, text: countryText});//Push values to data array


        callback(data); //Fill'em
    }
});

Maintenant, voici le tour! Comme suggéré par belov91, vous DEVEZ mettre ceci ...

$(element).select2("val", []);

Même s’il s’agit d’un Select2 à une ou plusieurs valeurs. D'autre part, rappelez-vous que vous ne pouvez pas affecter la fonction Select2 ajax à une balise <select>, ce doit être un <input>.

J'espère que cela vous a aidé (ou quelqu'un).

Au revoir.

11
Daniel Díaz Astudillo

J'ai ajouté

initSelection: function (element, callback) {

      callback({ id: 1, text: 'Text' });
}

Mais aussi 

.select2('val', []);

à la fin.

Cela a résolu mon problème.

4
belov91
var elem = $("#container").find("[name=elemMutliOption]");
for (var i = 0; i < arrDynamicList.length; i++)
{
   elem.find("option[value=" + arrDynamicList[i] + "]").attr("selected", "selected");
}
elem.select2().trigger("change");

Cela fonctionnera pour les personnes qui utilisent le même affichage pour plusieurs sections de la page. Cela dit, cela fonctionnera de la même manière pour les paramètres de configuration automatique par défaut de votre page OR et une page MODIFIER.

Le "FOR" parcourt le tableau contenant des options existantes déjà chargées dans le DOM.

1
gabisajr

vous pouvez utiliser ce qui suit 

$(element).select2("data",[ { id: result.id, text: "جابر احمد الصباح" },
    { id: 2, text: "خليل محمد خليل" }]);
0
Motasem Alsaqqa

Late :( mais je pense que cela résoudra votre problème.

 $("#controlId").val(SampleData [0].id).trigger("change");

Après la liaison de données

 $("#controlId").select2({
        placeholder:"Select somthing",
        data: SampleData // data from ajax controll
    });
    $("#controlId").val(SampleData[0].id).trigger("change");
0
Mahfuzur Rahman

Dans mon cas, le problème était de rendre la sortie. J'ai donc utilisé le texte par défaut si les données ajax ne sont pas encore présentes.

  templateSelection: function(data) {
    return data.name || data.element.innerText;
  }
0
Jonas Sciangula Street