1

Com esse código em php, passamos variáveis para url manualmente.

if (isset($_GET['layout'])) {
    $layout = $_GET['layout'];
} else {
    $layout = '1';
}

Com esse outro, em javascript, de autoria do @dvd aplicamos a variável passada na URL em todos os links da página.

var url_ = location.href,
    param = url_.substring(url_.lastIndexOf("/"), url_.length),
    params = ['layout','teste']; // insira aqui os nomes das variáveis
for(var y=0; y<params.length; y++){
   if(param.indexOf(params[y]) != -1){
      var var_ = url_.substring(url_.indexOf(params[y])+params[y].length+1,url_.length).match(/^(\d|\w){1,}/)[0],
          a_ = document.body.querySelectorAll("a");
      for(var x=0; x<a_.length; x++){
         a_[x].href += (a_[x].href.indexOf("?") == -1 ? "?" : "&")+params[y]+"="+var_;
      }
   }
}

Tudo isso funciona muito. O que eu gostaria agora é. Passar as variáveis para URL, através de um select box.

<select id="layout" name="layout">
    <option value="/?layout=1" selected="selected">Layout 1</option>
    <option value="/?layout=2">Layout 2</option>
    <option value="/?layout=3">Layout 3</option>
    <option value="/?layout=4">Layout 4</option>
</select>

Lembrando que pode ter mais de um select. Um para layout, outro para sidebar, e que a seleção de um, deve se manter quando outro for selecionado e a página for atualizada.

9
  • 1
    Você quer fazer a mesma coisa, mudar os links da página, só que agora usando selects?
    – Sam
    Commented 21/02/2018 às 15:50
  • @dvd exatamente. Commented 21/02/2018 às 15:50
  • @dvd, sim, isso mesmo. Commented 21/02/2018 às 15:53
  • Mas aí ficou confuso pra mim. Qual a relação da variável na URL da página com os selects box? Por exemplo, digamos que a URL da página seja: site.com.br/?layout=2.... qual a relação com o select box?
    – Sam
    Commented 21/02/2018 às 15:56
  • 1
    Eu entendi assim: verifica-se se na URL tem uma das variaveis, seleciona automaticamente no respectivo select e insere nos links da página... é isso?
    – Sam
    Commented 21/02/2018 às 16:05

1 Resposta 1

1

Você pode colocar nos values apenas o valor da variável que o código irá capturar normalmente. Também adicionei um option vazio que será o padrão caso não haja na URL a respectiva variável:

<select id="layout" name="layout">
    <option value="">Layout</option>
    <option value="1">Layout 1</option>
    <option value="2">Layout 2</option>
    <option value="3">Layout 3</option>
    <option value="4">Layout 4</option>
</select>

<select id="sidebar" name="sidebar">
    <option value="">sidebar</option>
    <option value="1">sidebar 1</option>
    <option value="2">sidebar 2</option>
    <option value="3">sidebar 3</option>
    <option value="4">sidebar 4</option>
</select>

E o código que irá alterar as variáveis e os links e fazer o refresh na página quando algum select for alterado:

document.addEventListener("DOMContentLoaded", function(){

   var url_ = location.href,
       param = url_.substring(url_.lastIndexOf("/"), url_.length),
       params = ['layout','sidebar']; // insira aqui os nomes das variáveis
   for(var y=0; y<params.length; y++){
      if(param.indexOf(params[y]) != -1){

         var var_ = url_.substring(url_.indexOf(params[y])+params[y].length+1,url_.length).match(/^(\d|\w){1,}/)[0],
             a_ = document.body.querySelectorAll("a");

         document.body.querySelector("#"+params[y]).value = var_;

         for(var x=0; x<a_.length; x++){
            a_[x].href += (a_[x].href.indexOf("?") == -1 ? "?" : "&")+params[y]+"="+var_;
         }
      }
   }

   var sels = document.querySelectorAll("select");

   for(var x=0; x<sels.length; x++){
      sels[x].addEventListener("change", function(){

         var sId = this.id,
             sVa = this.value;

         if(sVa && url_.indexOf(sId) == -1){

            location.href = url_+(url_.indexOf("?") == -1 ? "?" : "&")+sId+"="+sVa;

         }else if(sVa && url_.indexOf(sId+"="+sVa) == -1){

            var var_ = url_.substring(url_.indexOf(sId)+sId.length+1,url_.length).match(/^(\d|\w){1,}/)[0];

            location.href = url_.replace(sId+"="+var_, sId+"="+sVa);

         }

      });
   }

});
16
  • Como sempre. Solução extraordinária. Imagino que também posso utilizar radio em vez de select, alterando em var sels = document.querySelectorAll("radio"); Commented 21/02/2018 às 17:20
  • compreendo, era só por curiosidade, pensei em algo, talvez eu use um select e um radio. Por hoje isso está bom. Qualquer coisa eu dou um toque. Obrigadão! ;) Commented 21/02/2018 às 17:24
  • ei, não seria interessante um botão para resetar todas as variáveis? Commented 21/02/2018 às 21:26
  • Mais uma mãozinha. pt.stackoverflow.com/q/280250/95735 Commented 2/03/2018 às 23:17
  • opa: pt.stackoverflow.com/q/280501/95735 Commented 4/03/2018 às 18:11

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 .