example - Jquery getJSON rellena la pregunta del menú de selección

jquery json example

Question

Estoy completando un menú de selección con getJSON. Me pregunto si hay una forma de que pueda usar la función .each de jQuery para traer estos valores.

Seguramente debe haber una manera más fácil de lograr 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);
?>

El 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 ve así:

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

Answer 1

Del gran libro jQuery en acción , aquí hay una forma de hacer lo que quieras escribiendo un comando jQuery personalizado:

(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 entonces:

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

Answer 2

Esto debería funcionar:

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

Answer 3

Puede usar un ciclo for .

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

Si desea obtener el máximo rendimiento, debe reducir al mínimo las operaciones DOM, como esta:

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

Answer 4

$.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 anexarlo solo una vez al final es muy importante si le importa el rendimiento de su aplicación.

Answer 5

Usando el método de @ RaYell ... esto es lo que funcionó 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 !!