jQuery: La meilleure pratique pour peupler la liste déroulante?
https://stackoverflow.com/questions/815103
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
L'exemple que je vois tout le temps semble être sous-optimal, car il implique la concaténation de chaînes, ce qui semble ne pas être jQuery. Cela ressemble généralement à ceci:
$.getJSON("/Admin/GetFolderList/", function(result) {
for (var i = 0; i < result.length; i++) {
options += '<option value="' + result[i].ImageFolderID + '">' + result[i].Name + '</option>';
}
});
Y a-t-il un meilleur moyen?
La solution
Andreas Grech était plutôt proche ... c'est en fait this (notez la référence à <=> au lieu de l'élément dans la boucle):
var $dropdown = $("#dropdown");
$.each(result, function() {
$dropdown.append($("<option />").val(this.ImageFolderID).text(this.Name));
});
Autres conseils
$.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));
});
});
Ce que je fais ci-dessus consiste à créer un nouvel <option> élément et à l'ajouter à la liste options (en supposant que <=> est l'ID d'un élément déroulant.
PS Mon javascript est un peu rouillé, donc la syntaxe n'est peut-être pas parfaite
Bien sûr - créez options un tableau de chaînes et utilisez .join('') plutôt que += à chaque fois dans la boucle. Légère baisse des performances lorsqu’il s’agit de traiter un grand nombre d’options ...
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(''));
});
Oui. Je travaille toujours avec des chaînes tout le temps. Croyez-le ou non, c'est le moyen le plus rapide de créer un fragment DOM ... Maintenant, si vous n'avez que quelques options, ce n'est pas grave - utilisez la technique Dreas montre si vous aimez le style. Mais gardez à l'esprit que vous appelez i*2 fois l'analyseur HTML interne du navigateur, et non une seule fois, et modifiez le DOM à chaque fois dans la boucle ... avec un nombre suffisant d'options. vous finirez par payer pour cela, en particulier sur les anciens navigateurs.
Remarque: Comme le souligne Justice, cela disparaîtra si ImageFolderID et Name ne sont pas correctement encodé ...
Ou peut-être:
var options = $("#options");
$.each(data, function() {
options.append(new Option(this.text, this.value));
});
Le moyen le plus rapide est le suivant:
$.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);
});
Selon ce lien est le moyen le plus rapide, car vous intégrez tout dans un seul élément lors de toute insertion dans le DOM.
J'ai constaté que cela fonctionnait sur le site JQuery
$.getJSON( "/Admin/GetFolderList/", function( data ) {
var options = $("#dropdownID");
$.each( data, function(key, val) {
options.append(new Option(key, val));
});
});
J'ai lu que l'utilisation des fragments de document est performant, car il évite les reflets de page à chaque insertion d’élément DOM, il est également bien pris en charge par tous les navigateurs (même IE 6).
var fragment = document.createDocumentFragment();
$.each(result, function() {
fragment.appendChild($("<option />").val(this.ImageFolderID).text(this.Name)[0]);
});
$("#options").append(fragment);
J'ai tout d'abord entendu parler de cela dans le cours sur les meilleures pratiques JavaScript de CodeSchool .
Voici une comparaison des différentes approches , merci à l'auteur. .
Autre approche avec 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));
});
})
J'utilise le plug-in selectboxes . Cela transforme votre exemple en:
$('#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)
);
});
}
J'espère que ça aide. J'utilise généralement des fonctions à la place, écris tout le code à chaque fois.
$("#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));
});
});
});
J'utilisais jQuery et appelais une fonction pour remplir les menus déroulants.
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(""));
});
}
voici un exemple que j'ai fait sur le changement, je reçois des enfants du premier sélectionnez en deuxième sélectionnez
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
