0

¿Cómo puedo hacer un select en html, que muestre como opciones una columna específica de una tabla en mysql, y que al seleccionar uno de los datos, filtre y muestre la misma tabla, pero filtrada y con los datos de lo seleccionado?

Se hizo un filtrador de datos, pero con texto, ahora es hacerlo seleccionando a través de un select.

Se agregan los códigos utilizados.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">

        <link rel="stylesheet" href="css/main.css">

        <script src="js/jquery.min.js"></script>
        <script src="js/main.js"></script>

    </head>

    <body>

        <!--<section class="bloques"></section>-->

        <section class="principal">
            
            <div class="block1">
                <label for="caja_busqueda">Seleccionar origen</label>
                <br>
                <select id="caja_busqueda" name="origen" class="form-control"></select>

                <div class="block2">
                    <label>Tipo de dato</label>
                    <br>
                        <select id="segundaSel"></select>
                </div>
            </div>

            <div id="datos"></div>

        </section>
    </body>
</html>

Página principal en html

$(buscar_datos());

function buscar_datos(consulta){
    $.ajax({
        url: 'App/buscar.php',
        type: 'POST',
        dataType: 'html',
        data: {consulta: consulta},
    })
    .done(function(respuesta){
        $("#datos").html(respuesta);
    })
    .fail(function(){
        console.log("error");
    })
}

$(document).on('keyup', '#caja_busqueda', function(){
    var valor = $(this).val();

    if (valor != "") {
        buscar_datos(valor);
    }else{
        buscar_datos();
    }

Código en JS donde se hace el filtrado de la tabla

jQuery.each(OrigenTipo.ciudades, function(){
    htmlOrigen = htmlOrigen + '<option value="' + OrigenTipo.ciudades[iOrigen].origen + '">' + OrigenTipo.ciudades[iOrigen].origen + '</option>';
    iOrigen++;
});

Tengo en el jquery, desarrollado el select; ¿cómo puedo pasarle a esto una columna de la tabla que está seleccionada, generando así las opciones a seleccionar? Es decir, cambiar el contenido de htmlOrigen por un método php que saque los datos de la tabla y los muestre como select.

3
  • 1
    Por favor coloca tu código como texto y no como imagen. Saludos. Commented el 7 jul. 2020 a las 23:03
  • Agregado lo realizado y codigo en texto.
    – Vikingo22
    Commented el 7 jul. 2020 a las 23:21
  • @Vikingo22 Te voy a poner un ejemplo parecido a lo que indicas
    – Cesarin
    Commented el 8 jul. 2020 a las 0:53

1 respuesta 1

0

Primero se carga con Mysql el contenido de la lista en el select con el que se trabaja, también podría ser estático.

Con esta función se obtiene el valor seleccionado de esa lista:

$(document).ready(function(){
    $("button#recargarPersonal").click(function(e){ //Aquí escucha la solicitud desde un clic // 
         $("#Unidades").on('change', function(){ //Aqui escucha el cambio en el select
            $("#Unidades option:selected").each(function(){
                var cadenaUnidad = $('#Unidades').val(); // Toma el valor seleccionado
                //alert("cadenaUnidad"+cadenaUnidad); // Aquí se puede ver el valor obtenido
                $.ajax({
                async:true,
                cache:false,
                type: 'POST',
                url: 'cargarPersonal.php',data: {cadenaUnidad:cadenaUnidad}
            })
        .done(function(data){
        $('#Personal').html(data);// Aquí carga el resultado de la consulta generando la lista en otro select
        //alert('#Personal');
        })
        .fail(function(){
        alert('Hubo un error al cargar la lista de personal');
            }); 
           });// fin de  each - funcion que escucha elemento-
        });
    });
   
});
Espero sea de ayuda

Saludos

4
  • Estimado, la respuesta me ayuda mucho, pero me queda una consulta mas,
    – Vikingo22
    Commented el 8 jul. 2020 a las 13:29
  • Pregunta y si puedo resolver con gusto para eso estamos aqui... : )
    – Cesarin
    Commented el 8 jul. 2020 a las 15:59
  • Modifique la pregunta, añadí la parte de jQuery que creo es donde debo añadir alguna forma en donde tomar la columna de la tabla, para luego mostrarla como opcion en el select.
    – Vikingo22
    Commented el 8 jul. 2020 a las 16:33
  • En el siguiente enlace encontraras como hacer lo que requieres, quizás tendrás que adaptarlo a tus necesidades o forma de programar: jose-aguilar.com/blog/…
    – Cesarin
    Commented el 8 jul. 2020 a las 16:40

Tu Respuesta

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

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