Cómo crear un filtro usando bootstrap y jQuery

He estado intentando crear un filtro (imagen siguiente) usando pestañas de bootstrap y jQuery pero no sé cómo obtener el valor de las 2 opciones seleccionadas y aplicar al botón de búsqueda.

Lo que necesito es obtener el valor de las 2 cajas seleccionadas y aplicarlo al botón de búsqueda para que el contenido se muestre a continuación.

Vea la imagen de abajo.

FILER

html



     Required meta tags 
    
    

     Bootstrap CSS 
    [email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    Hello, world!




    
    
    
    

        

            Div 1
        

        

            Div 2
        

        

            Div 3
        

        

            Div 4

Pregunta hecha hace 3 años, 4 meses, 27 días - Por codecrusaderx

4 Respuestas:

  • html



     Required meta tags 
    
    

     Bootstrap CSS 
    [email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    Hello, world!




    
    
    
    
    
        
    
            Div 1
        
    
        
    
            Div 2
        
    
        
    
            Div 3
        
    
        
    
            Div 4

    Respondida el Dec 18, 2020 a las 07:08 - por javagiant

    Votos positivos: 0 | Votos negativos: 0 

  • $('button[type="button"]').on('click', function(){
    console.log($('select#mySelect').val());
     console.log($('select#month').val());
});

    Respondida el Dec 18, 2020 a las 07:14 - por bitcraftsman

    Votos positivos: 0 | Votos negativos: 0

  • El problema principal en tu código es que estás intentando utilizar el método tab() en un elemento <option>, pero este método pertenece a los elementos de pestañas de Bootstrap (<a> o <li>) y no a los elementos <option> de un <select>.

    Una forma de solucionar este problema es obtener el valor seleccionado de los <select> y utilizarlo para mostrar el contenido correspondiente en lugar de utilizar el método tab(). Aquí te dejo un ejemplo modificado de tu código que realiza esta funcionalidad:

    html




    
    
    

    
    

    Hello, world!




    
    
    
    
    
        
    
            Div 1
        
    
        
    
            Div 2
        
    
        
    
            Div 3
        
    
        
    
            Div 4

    Con este codigo, al seleccionar un año y un mes y hacer click en el botón de búsqueda, se mostrará el contenido correspondiente al año y mes seleccionados en las pestañas div adecuadas.

    Respondida el Dec 19, 2020 a las 07:08 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Claro, aquí tienes cómo crear un filtro usando pestañas de Bootstrap y jQuery y obtener los valores de las opciones seleccionadas:

    HTML

    html







    
  
    Div 1
    
  
    Div 2
    
  
    Div 3
    
  
    Div 4

    jQuery

    javascript
$(document).ready(function() {
  $('searchButton').click(function() {    var year = $('yearSelect').val();    var month = $('monthSelect').val();    
    // Mostrar el contenido según los valores seleccionados
    $('
    ' + year).show();
        $('.tab-pane').not('
    ' + year).hide();
        
    // Mostrar los valores seleccionados en una alerta
    alert('Año: ' + year + ', Mes: ' + month);
  });
});

    Explicación:

    HTML: Creamos dos selectores desplegables para el año y el mes, cada uno con sus respectivas opciones. También agregamos un botón de búsqueda y un div con pestañas para mostrar el contenido filtrado. jQuery: Obtenemos los valores seleccionados de los selectores desplegables cuando se hace clic en el botón de búsqueda. Usamos jQuery para mostrar el contenido correspondiente en el div con pestañas según los valores seleccionados.

    • Mostramos los valores seleccionados en una alerta solo para fines de demostración. Cambia esto según tus necesidades.
    Espero que esto resuelva tu problema. Si tienes alguna otra pregunta, no dudes en preguntar.

    Respondida el Dec 19, 2020 a las 07:20 - por Gemini

    Votos positivos: 0 | Votos negativos: 0