Ampliar formulário select option jquery plugin Chosen (v1.8.7) com lista de categorias e subcat

  • Autor Autor kahlito
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
kahlito

kahlito

Curioso
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Buenas.

Estoy intentando conseguir una lista de categorías y subcategorías a través de un select option y jquery y a la vez utilizando el plugin Chosen (v1.8.7) https://harvesthq.github.io/chosen/

Por ejemplo creo una lista de categorías donde el usuario elige una y automáticamente aparece en el input como elegida, pero a la vez me gustaría mostrar el nombre de la primera categoría elegida y una subcategoría con su lista de servicios pertenecientes a la categoría elegida, por ejemplo algo así:

  1. Select de Categorías -> 1, 2, 3, 4
  2. Nombre Cat elegida (por ejemplo Cat 1)
  3. Select de Subcategorías (Cat 1) -> Sub1, Sub2, Sub3
  4. Nombre de la Subcategoría elegida (por ejemplo Sub1, Sub3)

Si el usuario decide ingresar más de una categoría se repiten los pasos del 2 al 4 y así sucesivamente.

Aquí dejo un ejemplo de lo que intento hacer

ejemplo-cat-subc.png


Hasta ahora utilizando este plugin solo consigo que muestre el listado de categorías elegidas.

HTML:
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
  
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
    </head>
  
    <body>

    <select data-placeholder="Seleccione una categoría..." multiple class="chosen-select">
       <option selected="true" disabled="disabled">Elija una categoría </option>
        <option value="1">Cat 1</option>
        <option value="2">Cat 2</option>
        <option value="3">Cat 3</option>   
    </select>
      <script>
         //Activate the plugin on the select boxes of your choice: $(".chosen-select").chosen()       
         $(".chosen-select").chosen({no_results_text: "No hay opciones disponibles"});           
      </script>
    </body>
    </html>

¿Cómo puedo hacer que cuando elija el usuario muestre el nombre de la categoría elegida y a la vez una nueva opción select con la lista de subcategorías de esa misma categoría?

Antes de elegir este plugin lo intente con jquery normal pero no logro avanzar hasta hacer algo parecido o incluso cuando intento añadir un valor nuevo en el plugin actual no logro que haga lo que busco.
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Hola que tal! Esto parece ser algo que nuestro amigo @Recoftom podría saber! Aunque si ya conseguiste respuesta nos la puedes compartir, para el archivo! 😉 Saludos cordiales!
 
Hola AryaStark, aún estoy sin resolverla.

Gracias po tu aportación, saludos.
 
En teroría lo que necesitas son select dependietes: Categoría -> Subcategorías.

Hay muchas formas de poder hacer lo que necesitas. Ya sea con librerías o de forma nativa.

Para lo que requieres debes programar en evento onChange para los select.

Saludos.!
 
Voltar
Topo