Si vous aviez beaucoup d'options, ou ce code doit être exécuté très souvent, alors vous devriez regarder dans l'aide d'une DocumentFragment au lieu de modifier le DOM plusieurs fois inutilement. Pour seulement une poignée d'options, je dirais que c'est pas la peine si.
DocumentFragment est la bonne option pour l'amélioration de la vitesse, mais nous ne pouvons pas créer des options de l'élément à l'aide de document.createElement('option') depuis IE6 et IE7 ne sont pas de la soutenir.
Ce que nous pouvons faire, c'est créer une nouvelle sélectionner l'élément, puis ajouter toutes les options. Une fois la boucle terminée, ajouter à DOM objet.
De cette façon, nous allons modifier le DOM pour une seule fois!
fonctionne comme un charme 🙂
Les paramètres de la méthode sont un peu trompeuses, la fonction(val, texte) doit être une fonction(index, option) par exemple. Fonctionne bien dans le cas contraire.
Je suis en désaccord - val et text en fait de décrire les variables et leur utilisation.
pour cet exemple uniquement, mais comme un objectif général de la méthode, ces variables sont trompeuses (il m'a donné aucune idée de la façon d'utiliser cette méthode). Cependant, je vais vous donner que la réponse n'était pas à propos de l'utilisation de l' $.chaque méthode.
Vous touchez le DOM à chaque exécution de la boucle. Le mieux est d'utiliser un fragment de document ou au moins une chaîne concaténée et de toucher les DOM à la fois.
Ne pas mentionner que vous demandez jQuery pour chercher #mySelect à chaque exécution. Le Cache local var s'il vous plaît.
tada!
Génial, Nick! [supplémentaires caractères]
Juste assurez-vous que le texte est en fait ""+texte. J'ai rencontré un problème lors de l'obtention des données de l'espace à partir d'une base de données.
J'étais auparavant à l'aide de mySelect.append(new Option(text, val));, qui ne fonctionne pas avec IE8. J'ai dû passer à @nickf de mySelect.append($('<option></option>').val(val).html(text));
est-il un moyen de l'utiliser et aussi de la force de l'attribut sélectionné d'une option? j'ai pensé .val() permettrait de faire cela, mais il ne semble pas à ie8.
vrai|faux)
Excellent exemple, car il peut être rempli à l'aide d'un dictionnaire d'objet qui est un scénario très commun. Je suis d'accord avec mbillard que l'utilisation de val et de texte qui sont très couramment utilisés dans JQuery que les méthodes pourrait être renommé à quelque chose de plus descriptif.
La deuxième solution indiquée, pour moi, a eu presque deux fois plus longue que la première, sur de grandes listes déroulantes.
Sans plugins, cela peut être plus facile sans l'aide d'autant de jQuery, au lieu d'aller un peu plus old-school:
var myOptions ={
val1 :'text1',
val2 :'text2'};
$.each(myOptions,function(val, text){
$('#mySelect').append(newOption(text,val));});
Si vous souhaitez spécifier si oui ou non l'option a) est la valeur sélectionnée par défaut, et b) devraient être choisis maintenant, vous pouvez passer plus de deux paramètres:
var defaultSelected =false;var nowSelected =true;
$('#mySelect').append(newOption(text,val,defaultSelected,nowSelected));
Comment pouvez-vous définir les propriétés de la sélection d'une valeur par défaut?
Je l'aime mieux que la "<option></option>" méthode, ce qui semble sale.
solution élégante
+1 . vous m'a aidé aussi.
ne fonctionne pas avec ie8.. juste essayé et aussi vu un autre commentaire sur ce ci-dessous.
Un très bel exemple.
beaucoup plus élégant que l'on a accepté de répondre à
Si vous utilisez les guillemets à l'intérieur de votre option paramètres qu'ils vont fermer la fonction et de briser le script. Changer .prepend("...") / $("...") à .prepend('...') / $('...') de fixer le fragment de code.
Pease note @Phrogz la solution ne fonctionne pas dans IE 8, tandis que @nickf œuvres dans tous les principaux navigateurs. Une autre approche est la suivante:
J'ai besoin d'ajouter que de nombreuses options pour les listes déroulantes comme il y avait des listes déroulantes sur ma page. Je l'ai donc utilisé de cette façon:
function myAppender(obj, value, text){
obj.append($('<option></option>').val(value).html(text));}
$(document).ready(function(){var counter =0;var builder =0;//Get the number of dropdowns
$('[id*="ddlPosition_"]').each(function(){
counter++;});//Add the options for each dropdown
$('[id*="ddlPosition_"]').each(function(){var myId =this.id.split('_')[1];//Add each option in a loop for the specific dropdown we are onfor(var i=0; i<counter; i++){
myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);}
$('[id*="ddlPosition_'+myId+'"]').val(builder);
builder++;});});
Ce, de façon dynamique configurer des listes déroulantes avec des valeurs de 1 à n, et sélectionné automatiquement la valeur de l'ordre de cette liste a été (par exemple, 2ème liste déroulante a "2" dans la case, etc.).
Il était ridicule que je ne pouvais pas utiliser this ou this.Object ou $.obj ou quelque chose comme ça dans mon 2ème .each(), si --- j'ai eu réellement pour obtenir l'ID de l'objet, puis de saisir et de l'ensemble de l'objet de ma fonction avant de l'ajouter. Heureusement, l'ID de ma liste déroulante a été séparé par un "_" et j'ai pu l'attraper. Je ne crois que je devrais, mais il continuait à me donner jQuery exceptions autrement. Quelque chose que les autres aux prises avec ce que j'étais peut profiter à savoir.
Pourquoi êtes-vous en l'incrémentant le compteur dans chaque? Êtes-vous de nouveau à jquery? var compteur = $('[id*="ddlPosition_"]').la longueur est moins verbeux et plus efficace. Je pense que vous avez besoin d'un peu plus d'expérience avant de commencer à poster votre code. Ce n'est pas la qualité de la production de code est mal écrit et trop complexes pour une telle tâche triviale. Aucune infraction, mais il ya une raison pour laquelle vous avez 58 réponses et pas de voix.
Vous avez visiblement mal compris ce que j'étais en train de créer. Le compteur est d'incrémenter la valeur affichée dans la liste déroulante, et j'ai eu plusieurs avec le même ID, juste avec un autre "_##" à la fin, donc .longueur() aurait été inexact. C'est la raison pour laquelle la "id*=" dans le sélecteur.
Comme pour mes autres réponses, généralement je plaide pour des méthodes plus simples à chaque fois que possible, aussi, et si les gens n'étaient pas ésotérique, avec leur codage et écrit des choses qui étaient plus simplifiée, mes réponses auraient probablement plus de votes. Mais les gens veulent se faire un look smart et de sorte qu'ils ne choisissez pas quelque chose de si simple. Ne me faites pas de mal à vouloir simplement de l'industrie. Je ne les aime pas, de dépannage ou de construction sur d'autres personnes de code qui est ridiculement plus complexe qu'elle doit être, soit.
Je pourrait aussi avoir plus de confiance en $(this).longueur() dans la boucle de plus si quelqu'un pourrait expliquer pourquoi l'envoi de "$(this)" à la place de l'objet à myAppender n'a pas fonctionné.
Sans utiliser des plugins supplémentaires,
Si vous aviez beaucoup d'options, ou ce code doit être exécuté très souvent, alors vous devriez regarder dans l'aide d'une DocumentFragment au lieu de modifier le DOM plusieurs fois inutilement. Pour seulement une poignée d'options, je dirais que c'est pas la peine si.
------------------------------- Ajouté --------------------------------
DocumentFragment
est la bonne option pour l'amélioration de la vitesse, mais nous ne pouvons pas créer des options de l'élément à l'aide dedocument.createElement('option')
depuis IE6 et IE7 ne sont pas de la soutenir.Ce que nous pouvons faire, c'est créer une nouvelle sélectionner l'élément, puis ajouter toutes les options. Une fois la boucle terminée, ajouter à DOM objet.
De cette façon, nous allons modifier le DOM pour une seule fois!
val
ettext
en fait de décrire les variables et leur utilisation.#mySelect
à chaque exécution. Le Cache local var s'il vous plaît.mySelect.append(new Option(text, val));
, qui ne fonctionne pas avec IE8. J'ai dû passer à @nickf demySelect.append($('<option></option>').val(val).html(text));
Sans plugins, cela peut être plus facile sans l'aide d'autant de jQuery, au lieu d'aller un peu plus old-school:
Si vous souhaitez spécifier si oui ou non l'option a) est la valeur sélectionnée par défaut, et b) devraient être choisis maintenant, vous pouvez passer plus de deux paramètres:
"<option></option>"
méthode, ce qui semble sale.Avec le plugin: jQuery Boîte de Sélection. Vous pouvez faire ceci:
Vous pouvez effacer votre première liste Déroulante
$('#DropDownQuality').empty();
J'ai eu mon contrôleur MVC retour une liste avec un seul élément.
Ajouter un élément à la liste au début
Ajouter un élément à la liste à la fin
Commune de la liste Déroulante opération (Get, Set, Ajouter, Supprimer) à l'aide de jQuery
.prepend("...") / $("...")
à.prepend('...') / $('...')
de fixer le fragment de code.Pease note @Phrogz la solution ne fonctionne pas dans IE 8, tandis que @nickf œuvres dans tous les principaux navigateurs. Une autre approche est la suivante:
U peut utiliser directement
$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")
-> Ici u peut utiliser direct de la chaîne
Et aussi, utiliser .prepend() pour ajouter l'option pour le début de la liste des options.
http://api.jquery.com/prepend/
à l'aide de jquery, vous pouvez utiliser
où "myid" est le id de la liste déroulante et newvalue est le texte que vous souhaitez insérer..
J'ai besoin d'ajouter que de nombreuses options pour les listes déroulantes comme il y avait des listes déroulantes sur ma page. Je l'ai donc utilisé de cette façon:
Ce, de façon dynamique configurer des listes déroulantes avec des valeurs de 1 à n, et sélectionné automatiquement la valeur de l'ordre de cette liste a été (par exemple, 2ème liste déroulante a "2" dans la case, etc.).
Il était ridicule que je ne pouvais pas utiliser
this
outhis.Object
ou$.obj
ou quelque chose comme ça dans mon 2ème.each()
, si --- j'ai eu réellement pour obtenir l'ID de l'objet, puis de saisir et de l'ensemble de l'objet de ma fonction avant de l'ajouter. Heureusement, l'ID de ma liste déroulante a été séparé par un "_" et j'ai pu l'attraper. Je ne crois que je devrais, mais il continuait à me donner jQuery exceptions autrement. Quelque chose que les autres aux prises avec ce que j'étais peut profiter à savoir.essayer cette Fonction: