Façon plus rapide de peupler & lt; sélectionnez & gt; avec Javascript
J'ai deux <select> cases sur un formulaire. En sélectionnant un élément dans la première <select> boîte de déterminer ce qui doit apparaître dans la seconde <select> (à l'Aide d'Ajax http_request).
Dans certains cas, il peut être un grand 500 (estimation) des éléments dans la deuxième sélection et il prend le temps de 5 à 10 secondes pour mettre à jour dans IE. Firefox semble fonctionner parfaitement.
Je me demande si il existe un moyen plus rapide d'atteindre cet objectif. Actuellement, le serveur crée une chaîne de passe pour le client qui est alors rompu et ajouter chaque élément pour le sélectionner par la création d'un élément option et puis l'ajouter à la <select>.
J'ai essayé de créer l'ensemble de la sélection de l'élément comme une chaîne de caractères sur le serveur et l'ajouter à la forme, mais pour quelque raison il ne fonctionne pas dans Firefox (raté quelque chose?)
Grâce
source d'informationauteur
Vous devez vous connecter pour publier un commentaire.
500 éléments n'est pas beaucoup, même pour IE. Vous devez être en train de faire quelque chose d'autre à cause du décalage horaire.
J'ai juste essayé avec 500+ options dans IE6, IE7, FF2 et FF3 et tous ont été presque instantanée. J'ai utilisé ce code:
Je suggère de profilage de la partie du code qui récupère les données et le remplissage de la liste déroulante. Quelque chose peut être de prendre le temps. Par exemple, vérifiez que le code qui "casse" la chaîne de valeur retourné par le serveur est forte (on dirait que vous êtes en train de faire votre propre analyse).
Le premier code c'est bien, mais cela fonctionne mieux pour moi:
Réglage à l'aide de SelectElement.innerHTML serait le plus rapide... mais qui ÉCHOUE dans IE.
Dernière, j'ai vérifié, vous pouvez le faire dans IE, si vous encapsuler toutes les options dans un bidon <div> tag, ou de définir l'ensemble .outerHTML de la liste de sélection dans IE.
Le problème avec toutes ces réponses avec SelectElement.innerHTML est que vous ne pouvez pas faire ce truc avec les Sélectionne. La solution est d'utiliser innerHTML sur le PARENT de l'élément SELECT. Donc, dans votre ajax/jquery/le code que de créer une chaîne qui contient l'ENSEMBLE de l'SÉLECTIONNEZ le code HTML, puis obtenir le porteur (un div ou span ou quoi que ce soit) et de définir le innerHTML de la chaîne que vous avez construit.
Vous aurez besoin d'isoler les SÉLECTIONNER à partir de la page et explicite de l'élément parent (span ou div) pour empêcher d'autres éléments html à partir d'être des victimes lorsque vous détruire/reconstruire l'élément SELECT.
Réponse courte:
Je voudrais créer l'ensemble de la sélectionnez sur le serveur et l'injecter dans la page. Cette approche ignore navigateur ennuyeux divergences, et réduit la complexité du code côté client.
Vous ne mentionnez que vous avez essayé, mais il a échoué dans firefox. Je suggère de persévérer dans la à la faire fonctionner, de poster une autre question de demander de l'aide sur ce problème, ou de la modification de votre question pour nous montrer ce que vous avez fait cela ne fonctionne pas dans firefox.
N'oubliez pas d'ajouter à
document.createDocumentFragment()
tout d'abord, avant d'ajouter que pour le SÉLECTIONNER.Il aiderait grandement de voir votre code.
SI vous êtes à la création d'un
<option>
élément et ajoutant à chaque itération, vous devriez envisager la création de tous les<option>
éléments à la fois, et en ajoutant toutes à la fois.(Dans psuedocode):
Lorsque j'utilise la première version de ce que ça marche, mais peut être très lent dans la mise à jour de la deuxième sélection
Cette version fonctionne sous IE mais firefox ne semble pas poster second sélectionne des données. Ai-je raté quelque chose avec ça.
J'aime Croissant Frais et Kemal Fadillah réponses puisque l'utilisation:
Que pour l'objet de données, je recommande un petit tweak comme suit:
Si vous n'avez pas l'esprit à l'aide de CoffeeScript ensuite le code suivant remplit une liste de sélection avec les données JSON dans un couple de lignes.
HTML
CoffeeScript
Note : La boucle à l'intérieur de la
append
génère l'ensemble de la chaîne html avant l'appel de laappend
méthode une fois. C'est agréable et efficace.Exemple JSON