jQuery: best practice per popolare il menu a discesa?

Question

L'esempio che vedo postato tutto il tempo sembra come se fosse ottimale, perché si tratta di stringhe di concatenare, che non sembra così jQuery. Solitamente si presenta così:

$.getJSON("/Admin/GetFolderList/", function(result) { 
    for (var i = 0; i < result.length; i++) { 
     options += '<option value="' + result[i].ImageFolderID + '">' + result[i].Name + '</option>'; 
    } 
}); 

C'è un modo migliore?

Answer 1

Andreas Grech era abbastanza vicino ... in realtà è this (notare il riferimento alla this invece di la voce nel loop):

var $dropdown = $("#dropdown"); 
$.each(result, function() { 
    $dropdown.append($("<option />").val(this.ImageFolderID).text(this.Name)); 
}); 

Answer 2

$.getJSON("/Admin/GetFolderList/", function(result) { 
    var options = $("#options"); 
    //don't forget error handling! 
    $.each(result, function(item) { 
     options.append($("<option />").val(item.ImageFolderID).text(item.Name)); 
    }); 
}); 

Quello che sto facendo qui sopra è la creazione di un nuovo <option> elemento e aggiungendolo alla lista options (supponendo options è l'ID di un menu a discesa elemento.

PS Il mio javascript è un po 'arrugginita quindi la sintassi non può essere perfetto

Answer 3

io uso il plugin jQuery selectboxes Si trasforma il tuo esempio in:.

$('#idofselect').ajaxAddOption('/Admin/GetFolderList/', {}, false); 

Answer 4

Certo - fanno options un array di stringhe e utilizzare .join('') piuttosto che += ogni volta attraverso il ciclo. Lieve prestazioni urto quando si tratta di un gran numero di opzioni ...

var options = []; 
$.getJSON("/Admin/GetFolderList/", function(result) { 
    for (var i = 0; i < result.length; i++) { 
     options.push('<option value="', 
      result[i].ImageFolderID, '">', 
      result[i].Name, '</option>'); 
    } 
    $("#theSelect").html(options.join('')); 
}); 

Sì. Sto ancora lavorando con le stringhe per tutto il tempo. Che ci crediate o no, questo è il modo più veloce per costruire un frammento DOM ... Ora, se avete solo un paio di opzioni, esso non importa - utilizzare la tecnica Dreas demonstrates se vi piace lo stile. Ma tenere a mente, si sta invocando parser HTML interno del browser i*2 volte, piuttosto che solo una volta, e la modifica del DOM ogni volta attraverso il ciclo ... con un numero sufficiente di opzioni. finirai per pagarlo, specialmente sui browser più vecchi.

Nota: Come il giudice sottolinea, questo cadrà a pezzi se ImageFolderID e Name non sono encoded properly ...

Answer 5

il modo più veloce è questa:

$.getJSON("/Admin/GetFolderList/", function(result) { 
     var optionsValues = '<select>'; 
     $.each(result, function(item) { 
      optionsValues += '<option value="' + item.ImageFolderID + '">' + item.Name + '</option>'; 
     }); 
     optionsValues += '</select>'; 
     var options = $('#options'); 
     options.replaceWith(optionsValues); 
    }); 

Secondo this link è il modo più veloce perché si avvolge tutto in un unico elemento quando fare qualsiasi tipo di inserimento DOM.

Answer 6

$.get(str, function(data){ 
      var sary=data.split('|'); 
      document.getElementById("select1").options.length = 0; 
      document.getElementById("select1").options[0] = new Option('Select a State'); 
      for(i=0;i<sary.length-1;i++){ 
       document.getElementById("select1").options[i+1] = new Option(sary[i]); 
       document.getElementById("select1").options[i+1].value = sary[i]; 
      } 
      }); 

Answer 7

O forse:

var options = $("#options"); 
$.each(data, function() { 
    options.append(new Option(this.text, this.value)); 
}); 

Answer 8

spero che aiuta. Io di solito utilizzare le funzioni anziché scrivere tutto il codice ogni volta.

$("#action_selector").change(function() { 

     ajaxObj = $.ajax({ 
      url: 'YourURL', 
      type: 'POST', // You can use GET 
      data: 'parameter1=value1', 
      dataType: "json", 
      context: this,     
      success: function (data) { 
       json: data    
      }, 
      error: function (request) { 
       $(".return-json").html("Some error!"); 
      } 
     }); 

     json_obj = $.parseJSON(ajaxObj.responseText);    

     var options = $("#selector"); 
     options.empty(); 
     options.append(new Option("-- Select --", 0)); 
     $.each(ajx_obj, function() { 
      options.append(new Option(this.text, this.value)); 
     }); 
    }); 
}); 

Answer 9

Ho letto che l'uso document fragments è performante perché evita pagina reflow ad ogni inserimento di elementi DOM, è anche ben supportato da tutti i browser (anche IE 6).

var fragment = document.createDocumentFragment(); 
 

 
$.each(result, function() { 
 
    fragment.appendChild($("<option />").val(this.ImageFolderID).text(this.Name)[0]); 
 
}); 
 

 
$("#options").append(fragment);

ho letto su questo in CodeSchool's JavaScript Best Practices course.

Ecco un comparison of different approaches, grazie andare all'autore.

Answer 10

Ho trovato questo per essere al lavoro dal sito jquery

$.getJSON("/Admin/GetFolderList/", function(data) { 
    var options = $("#dropdownID"); 
    $.each(data, function(key, val) { 
    options.append(new Option(key, val)); 
    }); 
}); 

Answer 11

altro approccio con ES6

fetch('https://restcountries.eu/rest/v1/all') 
    .then((response) => { 
    return response.json() 
    }) 
    .then((countries) => { 
    var options = document.getElementById('someSelect'); 
    countries.forEach((country) => { 
     options.appendChild(new Option(country.name, country.name)); 
    }); 
    }) 

Answer 12

Sono stato con jQuery e chiamando una funzione per popolare elenchi a discesa.

function loadDropDowns(name,value) 
{ 
    var ddl = "#Categories"; 
    $(ddl).append('<option value="' + value + '">' + name + "</option>'"); 
} 

Answer 13

function LoadCategories() { 
    var data = []; 
    var url = '@Url.Action("GetCategories", "InternalTables")'; 
    $.getJSON(url, null, function (data) { 
     data = $.map(data, function (item, a) { 
      return "<option value=" + item.Value + ">" + item.Description + "</option>"; 
     }); 
     $("#ddlCategory").html('<option value="0">Select</option>'); 
     $("#ddlCategory").append(data.join("")); 
    }); 
} 

Answer 14

function generateYears() { 
        $.ajax({ 
         type: "GET", 
         url: "getYears.do", 
         data: "", 
         dataType: "json", 
         contentType: "application/json", 
         success: function(msg) { 
          populateYearsToSelectBox(msg); 
         } 
        }); 
} 

function populateYearsToSelectBox(msg) { 
    var options = $("#selectYear"); 
$.each(msg.dataCollecton, function(val, text) { 
    options.append(
     $('<option></option>').val(text).html(text) 
    ); 
}); 
} 

Answer 15

Ecco un esempio che ho fatto sul cambiamento ottengo i bambini della prima selezionare in seconda selezionare

jQuery(document).ready(function($) { 
$('.your_select').change(function() { 
    $.ajaxSetup({ 
     headers:{'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content')} 
    }); 

    $.ajax({ 
     type:'POST', 
     url: 'Link', 
     data:{ 
      'id': $(this).val() 
     }, 
     success:function(r){ 
      $.each(r, function(res) { 
       console.log(r[res].Nom); 
       $('.select_to_populate').append($("<option />").val(r[res].id).text(r[res].Nom)); 
      }); 
     },error:function(r) { 
      alert('Error'); 
     } 
    }); 
}); 

}); enter code here