Comment faire pour que la valeur d'une boîte de sélection conduise les options d'une deuxième boîte de sélection

Question

Je veux créer un formulaire HTML avec 2 boîtes de sélection. L'option sélectionnée dans la première boîte de sélection devrait conduire les options dans la deuxième boîte de sélection. Je voudrais résoudre cela dynamiquement sur le client (en utilisant javascript ou jQuery) plutôt que d'avoir à soumettre des données au serveur.

Par exemple, disons que je le Menu catégories et Menu Articles:

• Sandwiches
  • Turquie
  • Ham
  • Bacon
• côtés
  • n » Mac Fromage
  • Purée
• Boissons
  • Coca Cola
  • Sprite
  • Sweetwater 420

Je voudrais avoir deux boîtes select, nommées Menu Category et Items, respectivement. Lorsque l'utilisateur sélectionne Sandwiches dans la zone Menu Category, les options de la zone Items affichent uniquement les options Sandwich. Pour rendre cela plus difficile, supposons que je ne sais pas ce que les éléments de menu ou les catégories sont jusqu'à ce que je suis prêt à envoyer la page au client. J'ai besoin d'un moyen de "lier" les données pour les deux listes de sélection, mais je ne sais pas comment cela serait fait.

Je suis coincé comme comment je pourrais aborder cela. Une fois que je filtre la deuxième liste une fois, comment puis-je "trouver" les options de la liste une fois que j'ai changé ma catégorie de menu dans la première liste? Aussi, si je pense en SQL, j'aurais une clé dans la 1ère case qui serait utilisée pour lier les données dans la 2ème case. Cependant, je ne peux pas voir où j'ai de la place pour un élément "clé" dans la 2ème case.

Comment ce problème peut-il être résolu avec une combinaison de jQuery ou de javascript?

Answer 1

Vérifiez cet exemple sur Dynamic Drive, ou vous pouvez rechercher google pour "chained select" pour d'autres exemples.

Edit: Et voici une très belle Remy tutoriel Sharp: Auto-populating Select Boxes using jQuery & AJAX

---

Eh bien, parce que j'ai TOC, j'ai jeté ensemble un demo pour vous.

Il définit une variable pourrait également chargé comme json si nécessaire.

HTML

<select id="cat"></select> <select id="items" disabled></select> 

Script

$(document).ready(function(){ 

var menulist = { "categories" : [{ 
"category" : "Sandwiches", 
"items" : [ 
    {"name": "Turkey"}, 
    {"name": "Ham"}, 
    {"name": "Bacon"} 
    ] 
},{ 
"category" : "Sides", 
"items" : [ 
    {"name": "Mac 'n Cheese"}, 
    {"name": "Mashed Potatoes"} 
    ] 
},{ 
"category" : "Drinks", 
"items" : [ 
    {"name": "Coca Cola"}, 
    {"name": "Sprite"}, 
    {"name": "Sweetwater 420"} 
    ] 
}] 
}; 

var i,c = '<option>Select a category</option>', opt = $('<option/>'); 
var menu = menulist.categories; 

for (i=0; i < menu.length; i++){ 
c += '<option>' + menu[i].category + '</options>'; 
} 
$('#cat') 
.html(c) 
.change(function(){ 
    var indx = this.selectedIndex - 1; 
    if (indx < 0) { 
    $('#items').empty().attr('disabled','disabled'); 
    return; 
    } 
    var item = '<option>Select an item</option>'; 
    for (i=0; i < menu[indx].items.length; i++){ 
    item += '<option>' + menu[indx].items[i].name + '</options>'; 
    } 
    $('#items').html(item).removeAttr('disabled'); 
}); 

}); 

Answer 2

Vous pourriez faire du javascript simple. Si c'est tout ce que vous avez besoin de JavaScript, alors jQuery est probablement trop.

créer une fonction dans le qui remplit la deuxième zone de liste déroulante. Dans la première zone de liste déroulante, vous appelez cette fonction avec onChange = theFunctionYouCreated()

espérons que cela suffit pour vous aider à démarrer.