jQuery: le migliori pratiche per popolare il menu a discesa?
https://stackoverflow.com/questions/815103
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
L'esempio che vedo pubblicato tutto il tempo sembra non essere ottimale, perché comporta la concatenazione di stringhe, che sembra quindi non jQuery. Di solito sembra 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?
Soluzione
Andreas Grech era abbastanza vicino ... in realtà è this (nota il riferimento a <=> invece dell'elemento nel ciclo):
var $dropdown = $("#dropdown");
$.each(result, function() {
$dropdown.append($("<option />").val(this.ImageFolderID).text(this.Name));
});
Altri suggerimenti
$.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 sopra è creare un nuovo <option> elemento e aggiungerlo all'elenco options (supponendo che <=> sia l'ID di un elemento a discesa.
PS Il mio javascript è un po 'arrugginito, quindi la sintassi potrebbe non essere perfetta
Sicuro: trasforma options un array di stringhe e usa .join('') anziché += ogni volta che esegui il ciclo. Leggero aumento delle prestazioni quando si ha a che fare con 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 tutto il tempo. Che ci crediate o no, questo è il modo più veloce per costruire un frammento DOM ... Ora, se avete solo poche opzioni, non importa davvero - usate la tecnica Dimostra Dreas se ti piace lo stile. Ma tieni presente che stai invocando il parser HTML interno del browser i*2 volte, piuttosto che una sola volta, e modificando il DOM ogni volta attraverso il ciclo ... con un numero sufficiente di opzioni. finirai per pagarlo, specialmente sui browser più vecchi.
Nota: come sottolinea Justice, questo andrà in pezzi se ImageFolderID e Name non sono codificato correttamente ...
O forse:
var options = $("#options");
$.each(data, function() {
options.append(new Option(this.text, this.value));
});
Il modo più veloce è questo:
$.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 questo link è il modo più veloce perché avvolgi tutto in un singolo elemento quando esegui qualsiasi tipo di inserimento DOM.
Ho scoperto che funzionava dal sito jquery
$.getJSON( "/Admin/GetFolderList/", function( data ) {
var options = $("#dropdownID");
$.each( data, function(key, val) {
options.append(new Option(key, val));
});
});
Ho letto che usando frammenti di documenti è performante perché evita il riflusso della pagina ad ogni inserimento dell'elemento 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);
L'ho letto per la prima volta in Corso sulle best practice JavaScript di CodeSchool .
Ecco un confronto di approcci diversi , grazie all'autore .
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));
});
})
Uso il plug-in jquery selectboxes . Trasforma il tuo esempio in:
$('#idofselect').ajaxAddOption('/Admin/GetFolderList/', {}, false);
$.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];
}
});
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)
);
});
}
Spero che sia d'aiuto. Di solito uso le funzioni invece scrivo 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));
});
});
});
Sto usando jQuery e ho chiamato una funzione per popolare i menu a discesa.
function loadDropDowns(name,value)
{
var ddl = "#Categories";
$(ddl).append('<option value="' + value + '">' + name + "</option>'");
}
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(""));
});
}
ecco un esempio che ho fatto al cambio ottengo figli della prima selezione nella seconda selezione
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
