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.
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.
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
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"}]});
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.
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.
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.
vous pouvez utiliser ce qui suit
$(element).select2("data",[ { id: result.id, text: "جابر احمد الصباح" },
{ id: 2, text: "خليل محمد خليل" }]);
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");
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;
}