1

lo que quiero hacer por ejemplo es crear un select que se pueda elegir una categoría de producto, y luego más abajo esté otro select que se cargue con los productos de la categoria indicada mas arriba, Y SE PUEDAN ELEGIR VARIAS TAREAS paso mi ejemplo del modal (no es sobre productos, sino de oficios, para la explicacion de la pregunta utilice el escenario de productos):

servicios.php:

<!--=====================================
MODAL AGREGAR SERVICIO
======================================-->

<div id="modalAgregarServicio" class="modal fade" role="dialog">

  <div class="modal-dialog">

    <div class="modal-content">

      <form role="form" method="post" enctype="multipart/form-data">

        <!--=====================================
        CABEZA DEL MODAL
        ======================================-->

        <div class="modal-header" style="background:#3c8dbc; color:white">

          <button type="button" class="close" data-dismiss="modal">&times;</button>

          <h4 class="modal-title">Solicitar servicio</h4>

        </div>

        <!--=====================================
        CUERPO DEL MODAL
        ======================================-->

        <div class="modal-body">

          <div class="box-body">

            <!-- ENTRADA PARA UBICACION -->

            <div class="form-group">

              <div class="input-group">

                <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span> 

                <select class="form-control input-lg" name="nuevoPerfil">

                  <option value="">Seleccione ubicación</option>

                  <?php

                    $item = "idUsuario";
                    $valor = $_SESSION["idUsuario"];

                    $ubicaciones = ControladorServicios::ctrMostrarUbicaciones($item, $valor);

                    foreach ($ubicaciones as $key => $value){

                      echo '<option value="'.$value["idUbicacion"].'">'.$value["ubicacion"].'</option>';

                    }

                  ?>

                </select>

              </div>

            </div>

            <!-- ENTRADA PARA OFICIOS -->

            <div class="form-group">

              <div class="input-group">

                <span class="input-group-addon"><i class="glyphicon glyphicon-wrench"></i></span> 

                <select class="form-control input-lg" name="nuevoPerfil">

                  <option value="">Seleccione oficio</option>

                  <?php

                    $item = null;
                    $valor = null;

                    $oficios = ControladorServicios::ctrMostrarOficios($item, $valor);

                    foreach ($oficios as $key => $value){

                      echo '<option value="'.$value["idOficio"].'">'.$value["oficio"].'</option>';

                    }

                  ?>

                </select>

              </div>

            </div>

            <!-- ENTRADA PARA FECHA -->

            <div class="form-group">

              <div class="input-group">

                <span class="input-group-addon"><i class="fa fa-calendar"></i></span> 

                <input type="date" class="form-control input-lg" placeholder="Seleccionar fecha" name="nuevaFecha">

              </div>

            </div>

            <!-- ENTRADA PARA HORA -->

            <div class="form-group">

              <div class="input-group">

                <span class="input-group-addon"><i class="fa fa-clock-o"></i></span> 

                <input type="time" class="form-control input-lg" placeholder="Seleccionar hora" name="nuevaHora">

              </div>

            </div>

          </div>

        </div>

        <!-- ENTRADA PARA TAREAS -->

        <div class="form-group">

              <div class="input-group">

                <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span> 

                <?php

                    $item = "idOficio";
                    $valor = null; //COMO traer solo las tareas que este seleccionada en el oficio mas arriba

                    $tareas = ControladorServicios::ctrMostrarTareas($item, $valor);

                    foreach ($tareas as $key => $value){

                      echo '<input type="checkbox" value="'.$value["idTarea"].'">'.$value["tarea"].'';

                    }

                  ?>

              </div>

            </div>

        <!--=====================================
        PIE DEL MODAL
        ======================================-->

        <div class="modal-footer">

          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Salir</button>

          <button type="submit" class="btn btn-primary">¡Registrarme!</button>

        </div>

        <?php

          $crearUsuario = new ControladorUsuarios();
          $crearUsuario -> ctrCrearUsuario();

        ?>

      </form>

    </div>

  </div>

</div>
1
  • En mi opinión lo más fácil es crear varios select, el principal y luego uno por cada categoría, entonces según el valor de tu primer select muestras o ocultas los demás select
    – Gabriel
    el 28 sep. 2018 a las 15:27

1 respuesta 1

1

Es sencillo de hacer, necesitarás:

  1. Un JSON con los elementos de ambos select.
  2. Un pequeño script en JS

Paso numero 1: Definir nuestro JSON

<?php

$categorias = [
    "Deportes" => [
        "Natación",
        "Fútbol",
        "Voleibol",
        "Baloncesto",
        "Tenis",
        "Bádminton",
        "Béisbol",
        "Balonmano"
    ],
    "Paises" => [
        "Argentina",
        "Brazil",
        "Ecuador"
        "Estados Unidos",
        "España",
        "México",
        "Uruguay",
        "Perú",
        "Venezuela"
    ],
    "Colores" => [
        "Rojo",
        "Azul",
        "Verde",
        "Morado",
        "Amarillo",
        "Purpura",
        "Naranja",
        "Dorado",
        "Plata"
    ]
];

?>

Paso numero 2: Definir nuestra estructura

<select id="categorias">
    <option value="">-- Seleccione una opción --</option>
</select>

<select id="valores">
    <option value="">-- Seleccione una opción --</option>
</select>

Paso numero 3: Escribir el script para el cambio de valores de forma dinamica.

<script>
    var DATOS = <?= json_encode($categorias) ?>; // JSON con los valores que nos interesan
    (function($){
        $(document).ready(function() {
            var html = ""; // variable que almacenara el codigo de los options generados
            $.each(DATOS, function(key, val) { // Generamos los options del primer select
                html += "<option value=\"" + key + "\">" + key + "</option>";
            });
            $("#categorias").append(html); // añadimos los options generados al primer select
            html = "";
            // Añadimos un evento change el cual se activará cuando se cambie el valor del select #categorias
            $("#categorias").on("change", function() {
                var opt = $(this).val(); // Optenemos el valor del select #categorias
                $.each(DATOS[opt], function(key, val){ Generamos los options del segundo select
                    html += "<option value=\"" + val + "\">" + val + "</option>";
                });
                $("#valores").html("").append(html); // añadimos los options generados al segundo select
                html = ""; 
            });
        });
    })(jQuery);
</script>

Te dejo el ejemplo funcional una vez el JSON es generado.

var DATOS = {"Deportes":["Nataci\u00f3n","F\u00fatbol","Voleibol","Baloncesto","Tenis","B\u00e1dminton","B\u00e9isbol","Balonmano"],"Paises":["Argentina","Brazil","Ecuador","Estados Unidos","Espa\u00f1a","M\u00e9xico","Uruguay","Per\u00fa","Venezuela"],"Colores":["Rojo","Azul","Verde","Morado","Amarillo","Purpura","Naranja","Dorado","Plata"]};
(function($){
    $(document).ready(function() {
        var html = "";
        $.each(DATOS, function(key, val) {
            html += "<option value=\"" + key + "\">" + key + "</option>";
        });
        $("#categorias").append(html);
        html = "";
        $("#categorias").on("change", function() {
            var opt = $(this).val();
            $.each(DATOS[opt], function(key, val){
                html += "<option value=\"" + val + "\">" + val + "</option>";
            });
            $("#valores").html("").append(html);
            html = "";
        });
    });
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="categorias">
    <option value="">-- Seleccione una opción --</option>
</select>

<select id="valores">
    <option value="">-- Seleccione una opción --</option>
</select>

Saludos!

2
  • Gracias por la respuesta Jesús, lo que necesito es traer todos esos datos de la BD, y tengo un archivo separado (el cual incluyo en la plantilla) con las funciones de JavaScript, como puedo hacer para que traiga por ejemplo los datos de las categorias en un select, y de acuerdoa que categoria se eligio en el primer select, le cargue todos los productos de esa categoria en el segundo select el 28 sep. 2018 a las 16:19
  • @GADGustavo67 No traes solo los datos de las categorías en un select. Tienes que traer todos los datos necesarios. En la respuesta de Jesús-Magallón tienes que traer los datos para deportes, países y colores y los utilizas para crear un objeto de categorías. Cuando el usuario escoge una opción del primer select, el Javascript crea las opciones del segundo select.
    – enxaneta
    el 29 sep. 2018 a las 13:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.