21 votos

Jquery getJSON rellenar seleccione menú cuestión

Estoy rellenando un selecto menú con getJSON. Me pregunto si hay una manera que puedo usar jQuery .cada función de integrar a estos valores?

Seguramente debe de haber una manera más fácil para hacer esto...tal vez?

Archivo 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);
?>

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>"); 
    });

mi salida json se parece a esto:

[{"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"}]

48voto

RaYell Puntos 26761
$.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);
});

Almacenar el código HTML en una variable y anexar una sola vez, al final, es muy importante si usted se preocupa de su rendimiento de la aplicación.

14voto

Richard Puntos 11249

Esto debería funcionar:

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

3voto

Santiago Cepas Puntos 2127

Desde el gran libro de jQuery en Acción,aquí es una manera de hacer lo que quieres escribir una costumbre jQuery comando:

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

Y luego:

$.getJSON('selectMenus.php', 
   function(data){
      $("select.month").loadSelect(data);
   }
);

2voto

Scott Puntos 423

El uso de @RaYell del método....esto es lo que ha funcionado para mí:

$.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);
});

Gracias a todos por su ayuda en esto!!

0voto

Alex Gyoshev Puntos 6714

Usted puede utilizar un for de bucle.

for (var i = 0, len = data.length; i < len; i++)
    $("select.month")
         .append("<option value=" + data[i].monthID + ">" + data[i].month + "</option>");

Si usted desea obtener el máximo rendimiento, se debe reducir el DOM operaciones a un mínimo, como este:

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: