Cómo hacer que el valor de un cuadro de selección controle las opciones de un segundo cuadro de selección

Quiero hacer un formulario HTML con 2 cuadros de selección. La opción seleccionada en el primer cuadro de selección debe conducir las opciones en el segundo cuadro de selección. Me gustaría resolver esto dinámicamente en el cliente (usando javascript o jQuery) en lugar de tener que enviar datos al servidor.

Por ejemplo, supongamos que tengo las siguientes categorías de menú y elementos de menú :

  • Sandwiches
    • Turquía
    • jamón
    • Tocino
  • Lados
    • Macarrones con queso
    • Puré
  • Bebidas
    • Coca Cola
    • Duende
    • Sweetwater 420

Tendría dos cuadros de select , denominados Menu Category y Items , respectivamente. Cuando el usuario selecciona Sandwiches en el cuadro Menu Category , las opciones en el cuadro Items solo mostrarán las opciones de Sandwich.

Para que esto sea más desafiante, supongamos que no sé cuáles son los elementos o categorías del menú hasta que esté listo para enviar la página al cliente. Necesitaré alguna forma de “vincular” los datos para las dos listas de selección, pero no sé cómo se haría eso.

Estoy estancado en cómo podría abordar esto. Una vez que filtre la segunda lista una vez, ¿cómo puedo “encontrar” las opciones de la lista una vez que cambio la categoría de mi menú en la primera lista? Además, si estoy pensando en SQL, tendría una clave en la primera casilla que se usaría para vincular los datos en la segunda casilla. Sin embargo, no puedo ver dónde tengo espacio para un elemento “clave” en la segunda casilla.

¿Cómo podría resolverse este problema con una combinación de jQuery o JavaScript simple?

Consulte este ejemplo en Dynamic Drive , o puede buscar en google ” selección encadenada ” para otros ejemplos.

Editar: Y aquí hay un muy buen tutorial de Remy Sharp: rellenar automáticamente cuadros seleccionados usando jQuery y AJAX


Bueno, porque tengo TOC, armé una demostración para ti.

Define que una variable también podría cargarse como json si es necesario.

HTML

   

Guión

 $(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 = '', opt = $(''); var menu = menulist.categories; for (i=0; i < menu.length; i++){ c += ''; for (i=0; i < menu[indx].items.length; i++){ item += ' 

Usted puede hacer javascript simple. Si esto es todo lo que necesita para javascript, entonces jQuery es probablemente demasiado.

crear una función en el que rellena el segundo cuadro combinado. En el primer cuadro combinado, llama a esa función con onChange = theFunctionYouCreated ()

Espero que eso sea suficiente para comenzar.

Intereting Posts