Search link construction, combining select?

Asked

Viewed 91 times

1

I am having a small problem with building a search filter for my site.

Anyway, I need a filter that shows options that are related to the previous select example:

jsFiddle:http://jsfiddle.net/u4eb27rb/

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: http://codepen.io/anon/pen/zvwGVj

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 I select the department "Clothing" The construction of the link if gives the following form example:

Department Category Specification Helmet Clothing Closed Open

The final link in theory would look like this on the filter button:

http://www.rs1.com.br/capacete?fq=specificationFilter_29:Aberto

if the user selected the option Vestuário>Capacete>Aberto

I want to set up a filter that way, the first level that is called clothing is just a visual way of knowing where the user wants to find the items on the site.

I could do that ?

Update: I managed to generate the first level of the link, but the last level could not solve, to compare the second select...

http://codepen.io/anon/pen/pjPWYR?editors=101

  • In this link you put where is the "clothing" part? Do you have any object or array with the possible links of each category? tree type options?

  • yes I have, if in case he selects Clothing, would have to bring the options I have that in case would be some examples would be: Helmet, Pants, Jacket, Glove, Boots already the specification is something you would have to see on the platform as they would be... but if you can do for a department, I believe it’s the same for others who will add.

  • Is that it? http://answall.com/questions/87411/selectr-o-pa%C3%Ads-e-traz-o-estado/87417#87417

  • Basically, but in the end build the link on the filter button with the selected options.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.