Ampliar formulario select option jquery plugin Chosen (v1.8.7) con lista de categorías y subcat

kahlito Seguir

Curioso
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
27 Nov 2019
Mensajes
13
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.
 

AryaStark

Mi
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
6 Jun 2022
Mensajes
3.033
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
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!
 

kahlito

Curioso
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
27 Nov 2019
Mensajes
13
Hola AryaStark, aún estoy sin resolverla.

Gracias po tu aportación, saludos.
 

cholemon

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
12 Mar 2017
Mensajes
337
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.!
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba