web-dev-qa-db-fra.com

JQuery getJSON peupler sélection question de menu

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"}]
jqueryajaxjsongetjson
21
Scott

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!

2
Scott
$.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.

48
RaYell

Cela devrait fonctionner:

   $.getJSON('selectMenus.php', function(data){
        $.each(data, function(index,item) {
           $("select.month").append("<option value=" + item.monthID + ">" + item.month + "</option>"); 
    });
    });
14
Richard

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);
   }
);
3
Santiago Cepas

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(''));
0
Alex Gyoshev