Filtro com jquery

[Larodiel 0]

Pessoal alguém ai sabe como faz um filtro = o desse site?http://www.chinesepigment.com/productclass.asp

[haruan 0]

é um input select, que no onchange ele puxa via ajax os outros itens via banco

 

Sei fazer com jquery

 

ex:

<select name="select" id="select"  size="6"> 
            <select name="select2" id="select2"  size="6">
           <select name="select3" id="select3"  size="6"> 

no select você manda ele puxar todos os itens iniciais

 

depois via jquery você usa o seguinte modelo de código

 

$(document).ready(function(){	

$('#select').change(
                    function()
                    {
                        $('#select2').html('<option value="">Loading...</option>');

                        $.post(
                            'ajax/select2.php',{select:$(this).val()},function(resposta)
                            {
                                $('#select2').html(resposta);
                            }
                        );
                    }
                );
});

Então você cria uma página dentro da pasta ajax, no caso chamada select2.php

e nela você pega o item postado no ajax, e puxa do banco os outros valores

 

<? require_once("../includes/require.php"); ?>
<? 
$select = $_POST["select"];

global $conn;

$sql = "SELECT 
            id,  
            nome 
        FROM 
            <tabela do select 2>
        WHERE 
            select_id='$select'"; 
$varResult=mysql_query($sql,$conn) or die( mysql_error() );

$varContent = "<option value=''>-- Select --</option>\n";
		for($i=0;$row=mysql_fetch_array($varResult);$i++)
		{
			$varCod=$row['id'];
			$varStrName=$row['nome'];
			$varContent .= "<option value='".$varCod."'>".$varStrName."</option>\n";
		}
			echo $varContent;
?>

[Larodiel 0]

entendi, ai qnd clicar no botão enviar, oq acontece?, tem como dar redirect ou algo parecido para uma página de resultado?

 

E tem como fazer sem BD tbm?

[haruan 0]

entendi, ai qnd clicar no botão enviar, oq acontece?, tem como dar redirect ou algo parecido para uma página de resultado?

 

E tem como fazer sem BD tbm?

 

Quando você clicar em enviar, os selects vão estar preenchidos igual se você tivesse feito eles direto na página,

com name, value dos itens selecionados.

 

quando você clica no botão enviar no caso ele daria um submit,

e no form(formulario) você pode escolher pra qual página vai.

 

dê uma olhada no basico de html,php

pra entender caso você esteja começando agora google

 

pra fazer sem banco de dados, é só você mudar o arquivo que fica dentro do ajax,

no lugar de ele retornar o que puxa do banco, mande ele retornar o que você quiser, usando case.

[Larodiel 0]

Vlw, entendi agora, vlw msm!

[Larodiel 0]

socoooooooorro, nom ta indo aqui pessoal to fazendo assim ó

 

html

<form method="post" name="filtrar" id="filtrar">
	<select name="tipo" id="tipo" size="10">
    	<option value="1">Corante</option>
        <option value="2">Pigmento</option>
        <option value="3">Preparação Pigmentária</option>

    </select>
    
    <select name="cor" id="cor" size="10">
    </select>
    
     <select name="densidade" id="densidade" size="10">
    </select>
    
     <select name="produto" id="produto" size="10">
    </select>
</form>

 

jquery

$(document).ready(function(){
	var carregando = "<option value=''>Carregando...</option>"
	

	$("#tipo").change(function(){	
			$("#densidade").empty()
			$("#produto").empty();
			$("#cor").html(carregando);
			
			$.post("selectAjax.php",{opcao:$(this).val(), filtro: "tipo"}, function(resposta){
			
				$("#cor").html(resposta);
				$opcao = " ";
			
			})	
	})
	
	$("#cor").change(function(){	
			$("#produto option").empty();
			$("#densidade").html(carregando);
			
			$.post("selectAjax.php",{opcao:$(this).val(), filtro: "cor"}, function(resposta){
			
				$("#densidade").html(resposta);
				$opcao = " ";
			
			})	
	})
	
	$("#densidade").change(function(){	
		
			$("#produto").html(carregando);
			
			$.post("selectAjax.php",{opcao:$(this).val(), filtro: "densidade"}, function(resposta){
			
				$("#produto").html(resposta);
				$opcao = " ";
			
			})	
	})
});

php

 

<?php

	$opcao = $_POST['opcao'];
	$filtro = $_POST['filtro'];

include('config.php');
$id=0;
				
				

				switch($filtro){
					
					case "tipo": 	$sql = mysql_query("SELECT * FROM cor WHERE id='$opcao'"); 
								   	 while($row=mysql_fetch_array($sql))
                					{
										$id++;
										$nome = $row['nome'];
										$varContent.= "<option value='".$id."'>".$nome."</option>\n";
                					}
									$id=0;
								break;
					
					case "cor": $sql = mysql_query("SELECT * FROM densidade WHERE id='$opcao'"); 
								   	 while($row=mysql_fetch_array($sql))
                					{
										$id++;
										$nome = $row['nome'];
										$varContent.= "<option value='".$id."'>".$nome."</option>\n";
                					}
										$id =0;
									break;
					
					case "densidade": $sql = mysql_query("SELECT * FROM produto WHERE id='$opcao'"); 
								   	 while($row=mysql_fetch_array($sql))
                					{
										//$id++;
										$nome = $row['nome'];
										$varContent.= "<option value='".$id."'>".$nome."</option>\n";
                					}
										$id =0;
									break;				
				}
				
               
			   	
			
                        echo $varContent;



?>

o filtro nom funfa :(

 

Teste do Filtro http://triplicecor.com.br/teste-filtro.html