3

Olá pessoal boa tarde!

Tenho o seguinte código, que preciso formar um link no final, e exibir a pagina filtrada para o cliente, mais o link sempre cai no primeiro ID, que no caso é : Agrale.

Minha pergunta é: Como conseguiria estar fazendo esse filtro funcionar ?

Obs: Preciso que apenas o botão "Filtrar" fique com o ONclick dos values.

<div class="container">
    <select>
        <option id="" type="text" value="">Selecione o departamento...</option>
        <option id="departamento" type="text" value="automotivo">Automotivo</option>
    </select>
    <select>
        <option id="" type="text" value="">Selecione a categoria...</option>
        <option id="categoria" type="text" value="pastilhas-de-freio">Pastilhas de Freio</option>
    </select>
    <select>
        <option id="" type="text" value="">Selecione a montadora...</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Agrale">Agrale</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Alfa Romeo">Alfa Romeo</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Audi">Audi</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Cadillac">Cadillac</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Chevrolet">Chevrolet</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Chrysler">Chrysler</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Citroën">Citroën</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Daewoo">Daewoo</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Fiat">Fiat</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Ford">Ford</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Gurgel">Gurgel</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Honda">Honda</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Hyundai">Hyundai</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Isuzu">Isuzu</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Iveco">Iveco</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Jac Motors">Jac Motors</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Jeep">Jeep</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Kia Motors">Kia Motors</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Lancia">Lancia</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Land Rover">Land Rover</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Marcopolo">Marcopolo</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Mercedes Benz">Mercedes Benz</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Nissan">Nissan</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Peugeot">Peugeot</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Renault">Renault</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Scania">Scania</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Seat">Seat</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:SsangYong">SsangYong</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Subaru">Subaru</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Suzuki">Suzuki</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Toyota">Toyota</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Troller">Troller</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Troller">Volkswagen</option>
    </select>
    <INPUT id="filtro-j" type="submit" name="b1" value="Filtrar" onClick="location.href='http://www.rs1.com.br/' document.getElementById('departamento').value '/' document.getElementById('categoria').value '/' document.getElementById('montadora').value">
</div>

1 Resposta 1

2

Tens de usar o + para concatenar essa url. Na verdade não devias fazer isso no meio do HTML mas sim à parte:

Em vez de

onClick="location.href='http://www.rs1.com.br/' document.getElementById('departamento').value '/' document.getElementById('categoria').value '/' document.getElementById('montadora').value"

devias fazer:

<script>
var departamento = document.getElementById('departamento');
var categoria= document.getElementById('categoria');
var montadora= document.getElementById('montadora');
var input = document.getElementById('filtro-j');
input.addEventListener('click', function(e){
    e.preventDefault(); // não precisarias disto se o input fosse <button type="button">Filtrar</button>
    location.href = ['http://www.rs1.com.br', departamento.value, categoria.value, montadora.value].join('/');
});
</script>

e colocar esse código no final da página.

Outra coisa importante: É o select que deve ter o ID e não o mesmo ID em todas as option. IDs têm de ser únicas, ele estava sempre a selecionar o mesmo elemento, o primeiro que encontrar. Muda isso no HTML.

Exemplo online: http://codepen.io/anon/pen/zvwGVj

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .