Jquery - Filtre de liste de la boîte de base sur la zone de liste déroulante
J'ai deux listes, l'une affiche de voitures de l'entreprise et la seconde affiche toutes les voitures
Ici est la première comboxbox ( La première option est TOUT)
<select id="company">
<option selected="true" >ALL</option>
<option>GM</option>
<option>Honda</option>
<option>Ford</option>
</select>
voici ma deuxième lisbox
<select id="names" multiple="multiple" size="8">
<option>Chevy [GM]</option>
<option>Buick [GM]</option>
<option>Civic [Honda]</option>
<option>Accord [Honda]</option>
<option>Focus [Ford]</option>
</select>
Basé sur la première combox sélection , je dois afficher uniquement les voitures, les voitures de société dans la seconde liste . Même la deuxième liste a la voiture de l'entreprise nom entre parenthèses .. C'est à format fixe . Nouveau à partir de la première liste, si l'utilisateur sélectionne "TOUS les" je devrais le montrer à tous les véhicules .
Pourrait tout corps me donner une idée pour mettre en œuvre cette ou de l'extrait de code pour cela ?
Merci pour votre aide
Ce qui concerne
Kiran
OriginalL'auteur Bujji | 2011-04-21
Vous devez vous connecter pour publier un commentaire.
Pas tous les navigateurs vous permettent de masquer les éléments dans une liste déroulante, si vous avez besoin de garder une liste de base, et ensuite repeupler.
De travail de démonstration à http://jsfiddle.net/alnitak/WsHvS/
FWIW cela pourrait être fait plus rapidement, si nécessaire, par le stockage de la faire dans un champ distinct de sorte que .texte().indexOf() n'est pas appelée pour chaque ligne chaque fois que la liste est actualisée. J'ai aussi changé .html ().texte()
Encore une fois merci . Juste testé avec 1500 voitures et tout s'est bien passé .
OriginalL'auteur Alnitak
Autant que je sache, en se cachant de sélectionner des options ne fonctionne que sur Firefox, donc pour la compatibilité du navigateur, vous devez utiliser un peu plus de la ruse (voir cette SORTE de question et cette question entre autres). C'est ce que je suggère:
Pour HTML, avoir une copie cachée de votre sélectionnées ainsi que la version que vous avez actuellement fournir:
Cacher
basenames
avec CSSdisplay:none
.Alors pour votre jQuery, vous serez en remplacement
names
régulièrement avec un clone de la version debaseNames
et de filtrage.Vous pouvez le voir en action.
pourquoi mettre deux copies de la liste déroulante dans votre code HTML lorsque vous pourrait trivialement le clone de la charge [par ma réponse 😉 ]
Je serais heureux de dire que votre solution est plus élégante. Mine de simplement œuvres.
Merci beaucoup @justkt pour vos gentils mots
OriginalL'auteur justkt
EDIT: Fonctionne dans FF seulement
Essayez ceci:
Exemple: http://jsfiddle.net/Chandu/2Zppp/
Merci beaucoup pour votre réponse rapide, Mais malheureusement cela ne fonctionne que sur Firefox
Yep, juste de me rendre compte, vérifiez @justkt de réponse.
OriginalL'auteur Chandu
http://css-tricks.com/dynamic-dropdowns/
C'est que tu voulais essayer de faire avec la première option à l'aide de fichiers texte ou autre option est
JSON
.OriginalL'auteur mr_eclair
Une autre option consiste à attribuer un nom de classe pour les options comme ceci:
Puis, sur la base de la classe, vous pouvez show() et hide() comme ceci:
Pourrait être remplacé par addClass et removeClass dans ce cas. Merci
.show()
et.hide()
d'appliquer le style CSS pour les éléments. IE ne prend pas en chargedisplay
ouvisibility
sur<option>
éléments, de sorte que même la modifier pour.addClass()
serait encore échouer.Merci. Vous apprendre quelque chose tous les jours.
OriginalL'auteur Vincent Ramdhanie
Chacun de vous peut() sur la deuxième sélectionnez les options de change() de la première sélection, recherche de sous-chaîne et de définir les personnes handicapées de l'attribut. (Mais cette solution a un défaut: chaque navigateur prend en charge désactivé attribut pour l'option, autant que je sache.)
Mise à JOUR
Et si vous souhaitez masquer les options complètement, vous devriez envisager de stocker des éléments à partir de votre deuxième sélectionnez dans certains temp de stockage et de re-renseigner les sélectionner à partir du stockage uniquement avec les éléments qui correspondent à vos critères.
UPDATE2
OriginalL'auteur Dmitry
Edit: Testée et fonctionne avec IE7 et Firefox 3.6.x
Démonstration En Direct
HTML: note le
value=""
sur leALL
optionjQuery:
Grâce jnpcl . Oui comme justkt dit que cela ne fonctionne pas sur IE ou Chrome
Travailler sur une solution alternative.
Mis à jour avec IE solution.
OriginalL'auteur drudge