Trier la liste déroulante
Je suis en train de trier un dropdownlist (sélecteur) en html.
J'ai deux listes, une pré-sélection qui devrait être utilisé pour définir le contenu de la secont liste.
Un court échantillon de code:
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<table width=100% border="0">
<tr>
<td> </td>
<td>Product</td>
<td><select name="product" id="product" width="300" style="width: 300px">
<option></option>
<option id="TLX">TLX</option>
<option id="FLX">FLX</option>
<option id="MLX">MLX</option>
</select></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Power</td>
<td><select name="power" id="power" width="300" style="width: 300px">
<option></option>
<option name="TLX">6</option>
<option name="TLX">8</option>
<option name="TLX">10</option>
<option name="TLX">12</option>
<option name="TLX">15</option>
<option name="FLX">6</option>
<option name="FLX">8</option>
<option name="FLX">10</option>
<option name="FLX">12</option>
<option name="FLX">15</option>
<option name="FLX">17</option>
<option name="MLX">30</option>
<option name="MLX">40</option>
<option name="MLX">60</option>
</select></td>
<td> </td>
</tr>
</table>
</body>
</html>
Je veux b en mesure de choisir le produit et la puissance liste sortet en conséquence.
Par exemple, si TLX est choisie puis les 6, 8, 10, 12, et 15 sont présentés comme des possibilités dans la deuxième liste.
- Juste régénérer la liste avec les valeurs que vous avez besoin quand
product
changements.
Vous devez vous connecter pour publier un commentaire.
l'aide de vanille que vous pouvez faire comme ci-dessous
voir la démo de travail http://jsfiddle.net/ST5dq/
pas utiliser le nom de l'attribut, l'utilisation de données-nom, la valeur ou l'autre attribut, l'attribut de nom pas de travail de la croix-navigateur à l'option tag...
je vais utiliser les données de nom de
vous pouvez l'utiliser pour trier la liste
vous avez besoin de passer d'un élément du dom, pas un élément jQuery.
de lier l'sélectionnez parent pour sélectionner enfant, vous pouvez le faire
sur la page d'initialiser ajouter le code
Aucune tentative n'a été faite à la croix-navigateur ici... Mais il n'y a qu'un navigateur, je pense, qui peut vous donner le problème 🙂
Démo
Code
Ici est une version à l'aide de documentFragment:
Démo
documentFragment version
Mise à jour
Avec juste un peu plus de travail, cela peut être plus générique - dire lorsque de nouvelles exigences entrent dans les commentaires de l'original de la réponse 🙂
Exigences supplémentaires
Note: j'ai ajouté l'option "vide" élément de garder la solution la plus simple. Le code peut être adapté pour gérer l'absence de bien, mais qui sera laissé comme exercice pour le lecteur.
Avec les modifications ci-dessous, la logique du contrôleur est maintenant plus générique et qu'il peut s'adapter à l'annotation en acceptant des informations supplémentaires qui lui indique où trouver ses clés et de sélectionner des éléments.
Contrôleur Générique Exemple
Si vous utilisez jquery, peut être réalisé comme suit: Démo
Remarque: Dans les produits de la liste déroulante, le changement de l'attribut id de chaque option de nom.
Vous avez besoin en cascade dropdownlist
Veuillez jeter un oeil à ce lien:
Et vous pouvez trouver d'autres liens sur la cascade dropdownlists de recherche google ou autres...