I'm having a little problem building a search filter for my site.
Anyway, I need a filter that shows options that are related to the previous select example:
jsFiddle: link
var arr_cidades = {
sp: ["Sorocaba", "Boituva", "Tatuí"],
rj: ["Uma cidade do Rio", "Outra cidade"]
}
function escolha() {
var estado = document.querySelector("#estado");
var cidade = document.querySelector("#cidade");
cidade.disabled = false;
cidade.innerHTML = "";
switch (estado.value) {
case "sp":
for (i in arr_cidades.sp) {
cidade.innerHTML += "<option>" + arr_cidades.sp[i] + "</option>"
};
break;
case "rj":
for (i in arr_cidades.rj) {
cidade.innerHTML += "<option>" + arr_cidades.rj[i] + "</option>"
};
break;
default:
cidade.innerHTML += "<option>- Selecione uma cidade -</option>";
cidade.disabled = true;
}
}<span>Estado</span>
<br>
<select id='estado' onchange="escolha()">
<option value=''>- Selecione um Estado -</option>
<option value='sp'>SP</option>
<option value='rj'>RJ</option>
</select>
<br>
<br>
<span>Cidade</span>
<br>
<select id='cidade' disabled="true">
<option value=''>- Selecione uma Cidade -</option>
</select>But I need the access behavior of this link to be as follows:
CodePen: link
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>
var newLocation = ['http://www.rs1.com.br', departamento.value, categoria.value, montadora.value].join('/');
location.href = newLocation;
});<div class="container">
<select id="departamento" >
<option type="text" value="">Selecione o departamento...</option>
<option type="text" value="automotivo">Automotivo</option>
</select>
<select id="categoria" >
<option type="text" value="">Selecione a categoria...</option>
<option type="text" value="pastilhas-de-freio">Pastilhas de Freio</option>
</select>
<select id="montadora" >
<option type="text" value="">Selecione a montadora...</option>
<option type="text" value="?fq=specificationFilter_351:Agrale">Agrale</option>
<option type="text" value="?fq=specificationFilter_351:Alfa Romeo">Alfa Romeo</option>
<option type="text" value="?fq=specificationFilter_351:Audi">Audi</option>
<option type="text" value="?fq=specificationFilter_351:Cadillac">Cadillac</option>
<option type="text" value="?fq=specificationFilter_351:Chevrolet">Chevrolet</option>
<option type="text" value="?fq=specificationFilter_351:Chrysler">Chrysler</option>
<option type="text" value="?fq=specificationFilter_351:Citroën">Citroën</option>
<option type="text" value="?fq=specificationFilter_351:Daewoo">Daewoo</option>
<option type="text" value="?fq=specificationFilter_351:Fiat">Fiat</option>
<option type="text" value="?fq=specificationFilter_351:Ford">Ford</option>
<option type="text" value="?fq=specificationFilter_351:Gurgel">Gurgel</option>
<option type="text" value="?fq=specificationFilter_351:Honda">Honda</option>
<option type="text" value="?fq=specificationFilter_351:Hyundai">Hyundai</option>
<option type="text" value="?fq=specificationFilter_351:Isuzu">Isuzu</option>
<option type="text" value="?fq=specificationFilter_351:Iveco">Iveco</option>
<option type="text" value="?fq=specificationFilter_351:Jac Motors">Jac Motors</option>
<option type="text" value="?fq=specificationFilter_351:Jeep">Jeep</option>
<option type="text" value="?fq=specificationFilter_351:Kia Motors">Kia Motors</option>
<option type="text" value="?fq=specificationFilter_351:Lancia">Lancia</option>
<option type="text" value="?fq=specificationFilter_351:Land Rover">Land Rover</option>
<option type="text" value="?fq=specificationFilter_351:Marcopolo">Marcopolo</option>
<option type="text" value="?fq=specificationFilter_351:Mercedes Benz">Mercedes Benz</option>
<option type="text" value="?fq=specificationFilter_351:Nissan">Nissan</option>
<option type="text" value="?fq=specificationFilter_351:Peugeot">Peugeot</option>
<option type="text" value="?fq=specificationFilter_351:Renault">Renault</option>
<option type="text" value="?fq=specificationFilter_351:Scania">Scania</option>
<option type="text" value="?fq=specificationFilter_351:Seat">Seat</option>
<option type="text" value="?fq=specificationFilter_351:SsangYong">SsangYong</option>
<option type="text" value="?fq=specificationFilter_351:Subaru">Subaru</option>
<option type="text" value="?fq=specificationFilter_351:Suzuki">Suzuki</option>
<option type="text" value="?fq=specificationFilter_351:Toyota">Toyota</option>
<option type="text" value="?fq=specificationFilter_351:Troller">Troller</option>
<option type="text" value="?fq=specificationFilter_351:Troller">Volkswagen</option>
</select>
<button id="filtro-j" type="button">Filtrar</button>
</div>In case if I select the "Clothing" department The link construction is given the following example form:
Department Category Specification Clothing Closed Helmet Open
The final link in theory would look like this on the filter button:
http://www.rs1.com.br/capacete?fq=specificationFilter_29:Aberto
this if the user selected the option Vestuário>Capacete>Aberto
I want to mount a filter this way, the first level called clothing is just a visual way of knowing where the user wants to find the site's items.
Could you do that?
Update: I was able to generate the first level of the link, but the last level I could not solve, to compare the second select ...