Je remplis un menu de sélection avec getJSON. Je me demande s'il existe un moyen d'utiliser la fonction .each de jQuery pour intégrer ces valeurs?
Il doit sûrement y avoir un moyen plus facile d’y arriver… peut-être?
Fichier PHP:
<?php
$queryMonth = "SELECT monthID, month FROM months";
$result = $db->query($queryMonth);
while($rowMonth = $db->fetch_assoc($result)) :
$data[] = $rowMonth;
endwhile;
echo json_encode($data);
?>
Le jQuery:
$.getJSON('selectMenus.php', function(data){
$("select.month").append("<option value=" + data[0].monthID + ">" + data[0].month + "</option>");
$("select.month").append("<option value=" + data[1].monthID + ">" + data[1].month + "</option>");
$("select.month").append("<option value=" + data[2].monthID + ">" + data[2].month + "</option>");
$("select.month").append("<option value=" + data[3].monthID + ">" + data[3].month + "</option>");
$("select.month").append("<option value=" + data[4].monthID + ">" + data[4].month + "</option>");
$("select.month").append("<option value=" + data[5].monthID + ">" + data[5].month + "</option>");
$("select.month").append("<option value=" + data[6].monthID + ">" + data[6].month + "</option>");
$("select.month").append("<option value=" + data[7].monthID + ">" + data[7].month + "</option>");
$("select.month").append("<option value=" + data[8].monthID + ">" + data[8].month + "</option>");
$("select.month").append("<option value=" + data[9].monthID + ">" + data[9].month + "</option>");
$("select.month").append("<option value=" + data[10].monthID + ">" + data[10].month + "</option>");
$("select.month").append("<option value=" + data[11].monthID + ">" + data[11].month + "</option>");
});
ma sortie json ressemble à ceci:
[{"monthID":"1","month":"January"},{"monthID":"2","month":"February"},{"monthID":"3","month":"March"},{"monthID":"4","month":"April"},{"monthID":"5","month":"May"},{"monthID":"6","month":"June"},{"monthID":"7","month":"July"},{"monthID":"8","month":"August"},{"monthID":"9","month":"Septemeber"},{"monthID":"10","month":"October"},{"monthID":"11","month":"November"},{"monthID":"12","month":"December"}]
En utilisant @ RaYell's method .... c'est ce qui a fonctionné pour moi:
$.getJSON('months.php', function(data){
var html = '';
var len = data.length;
for (var i = 0; i < len; i++) {html += '<option value="' + data[i].monthId + '">' + data[i].month + '</option>';
}
$('select.month').append(html);
});
Merci à tous pour votre aide!
$.getJSON('selectMenus.php', function(data){
var html = '';
var len = data.length;
for (var i = 0; i< len; i++) {
html += '<option value="' + data[i].monthId + '">' + data[i].month + '</option>';
}
$('select.month').append(html);
});
Stocker le code HTML dans une variable et l'ajouter une fois à la fin est très important si vous vous souciez des performances de votre application.
Cela devrait fonctionner:
$.getJSON('selectMenus.php', function(data){
$.each(data, function(index,item) {
$("select.month").append("<option value=" + item.monthID + ">" + item.month + "</option>");
});
});
Dans le grand livre jQuery in Action , voici une façon de faire ce que vous voulez en écrivant une commande jQuery personnalisée:
(function($) {
$.fn.emptySelect = function() {
return this.each(function(){
if (this.tagName=='SELECT') this.options.length = 0;
});
}
$.fn.loadSelect = function(optionsDataArray) {
return this.emptySelect().each(function(){
if (this.tagName=='SELECT') {
var selectElement = this;
$.each(optionsDataArray,function(index,optionData){
var option = new Option(optionData.caption,
optionData.value);
if ($.browser.msie) {
selectElement.add(option);
}
else {
selectElement.add(option,null);
}
});
}
});
}
})(jQuery);
Et alors:
$.getJSON('selectMenus.php',
function(data){
$("select.month").loadSelect(data);
}
);
Vous pouvez utiliser une boucle for
.
for (var i = 0, len = data.length; i < len; i++)
$("select.month")
.append("<option value=" + data[i].monthID + ">" + data[i].month + "</option>");
Si vous souhaitez obtenir des performances maximales, vous devez réduire les opérations DOM au minimum, comme ceci:
var html = [];
for (var i = 0, len = data.length; i < len; i++) {
html[html.length] = "<option value=";
html[html.length] = data[i].monthID;
html[html.length] = ">";
html[html.length] = data[i].month;
html[html.length] = "</option>";
}
$("select.month").append(html.join(''));