Je suis une requête de base de données pour charger une liste déroulante à l'aide de JQuery. Existe-t-il un moyen d'afficher les mots "Chargement ..." dans la liste déroulante tandis que la requête est en cours d'exécution?
Merci.
5 Réponses :
Appelons votre liste déroulante 'UserChoice', vous pouvez écrire du code comme
Vous pouvez ajouter un élément temporaire à votre liste déroulante pendant que l'AJAX est en cours d'exécution:
$('#myDropDown').prepend($('<option></option>').html('Loading...'));
Pourquoi appeler la méthode HTML lorsque vous pouvez simplement faire $ ('# myDropdown'). Prepend ('Option> Chargement .. '); Semble plus facile de lire IMHO.
Je suis nouveau dans la programmation, pouvez-vous me dire comment puis-je faire cela avec mon code? ( Stackoverflow.com/Questtions/42593871/... )
S'il n'y a rien de là pour commencer, faites simplement que votre HTML par défaut et que vous avez éliminé la moitié de votre jQuery.
<select> <option>Loading...</option> </select>
C'est l'option Sanest (sans jeu de mots) à mon avis :) +1
Si vous exécutez la requête via un appel AJAX, vous pouvez utiliser quelque chose comme ce qui suit pour effacer d'abord la liste déroulante et insérer le message de chargement (dans JavaScript côté client):
var lb = document.getElementById ("myDropdownList");
lb.options.length = 0;
var newOpt = new Option("Loading...", "");
lb.options[0] = newOpt;
// Your jquery call here
...
Ajoutez ceci avant AJAX POST
$('#myDropDown').empty();
$('#myDropDown').append($('<option></option>').val("").html("Select"));
for (var i = 0; i < array.length; i++) {
$('#myDropDown').append($('<option></option>').val(array[i].selectedvalue).html(array[i].selectedtext));
}
FYI, lorsque vous ajoutez des articles à la liste déroulante après l'avoir récupéré, éteignez-vous d'ajouter manuellement chaque option à la liste si le nombre d'options est plus qu'un montant trivial. Vous voudrez faire un insert de lot similaire à: Var Options = []; var index = -1; Pour (Var Article dans les éléments) {Options [++ index] = ''; options [++ index] = éléments [élément]; Options [++ index] = ''; } options [++ index] = ''; $ (Listebox) .Après (options.join ('')); Le code d'avertissement n'est pas testé et ne fonctionnera probablement pas tel quel.
Ugh, le formatage ne prend pas ici, pas vraiment sûr comment le faire au format correctement. Voir comme point de lancement pour la performance avec un grand nombre d'options. Fondamentalement, vous voulez limiter la quantité de manipulation DOM que vous faites. Il est plus rapide de faire un grand insert dans le DOM que de la mettre à jour une grande quantité de fois.