1

Tenho um fórum com um campo select que possui muitas opções para selecionar, gostaria de dividir essas opções por área do fórum em dois select.

Todas as áreas e sub-áreas ficam em um único select.

Exemplo:

<div class="blockrow">
                <label for="destforumid">Fórum de Destino:</label>
                <select id="destforumid" name="destforumid" class="primary" tabindex="1">
    <option value="5" class="d0">Feedback (Categoria)</option>
    <option value="23" class="d0">Fórum de Estudos (Categoria)</option>
    <option value="7" class="d1">&nbsp; &nbsp; Anúncios e Enquetes</option>
    <option value="19" class="d1">&nbsp; &nbsp; Fale Conosco (Link)</option>

    <option value="10" class="d0">Designs (Categoria)</option>
    <option value="14" class="d2">&nbsp; &nbsp; &nbsp; &nbsp; Pedidos</option>
    <option value="29" class="d3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Atendidos (Sem Postagem)</option>
</select>

Pelo que pude ver, d0 é a cátegoria, não é fórum. d1 é um fórum do d0 acima e quando houver um d2 abaixo do d2, é um sub-fórum, ou seja, um fórum dentro do fórum d1 que está na categoria d0.

Se houver dois d2, quer dizer que existem 2 fóruns nessa categoria, bem simples de entender. no caso de um d3 depois de um d2, quer dizer que o d2 anterior que é um fórum, vai ter um outro fórum dentro, que é o d3. E assim por diante, podendo haver vários d1, d2, d3, d4...

As categorias são divididas a cada novo d0.

Gostaria de obter todos esses valores com js, onde no primeiro, atual select eu selecionaria apenas as categorias que desejo, e no segundo eu selecionaria o subfórum dessa categoria selecionada que desejo.

Todos os select tem um dado, o value, são eles que identificam o local selecionado.

O segundo select teria que ter os dados id="destforumid" name="destforumid" class="primary" tabindex="1" pois sem isso talvez não funcionasse.

Como eu poderia fazer com que o javascript capturasse automaticamente esses dados do select e organizassem da forma descrita acima em 2 select para que não ficasse uma lista enorme?

10
  • Obs: Deixei o select com poucas opções, suficientes para o exemplo e entendimento, mas no fórum são centenas se áreas, por isso a divisão facilitaria e muito.
    – Florida
    Commented 10/03/2018 às 23:00
  • O primeiro não seria igual, esqueci de por na pergunta esse detalhe, o primeiro serviria apenas para as categorias, o segundo é o que realmente iria selecionar. No caso do select Feedback (Categoria), ele não tem nenhum sub-fórum, teria que repetir ele no segundo select.
    – Florida
    Commented 10/03/2018 às 23:44
  • 1
    Blz, vou fazer aqui e qq ajuste a gente vê.
    – Sam
    Commented 11/03/2018 às 0:02
  • 1
    Outra dúvida: pode ser com jQuery?
    – Sam
    Commented 11/03/2018 às 0:06
  • 1
    Pode ser com o que você quiser :)
    – Florida
    Commented 11/03/2018 às 0:08

1 Resposta 1

1

Creio que seja isso que quer. Percorrer o primeiro select e colocar no segundo as subcategorias de acordo com a categoria selecionada.

Veja:

$(document).ready(function(){

   $(".blockrow select")
   .attr({
      id: "primeiro",
      name: ""
   });

   $("#primeiro option[class!='d0']").hide(); // escondo tudo que não tiver a classe 'd0'
   
   $("<select>", {
      id: "destforumid",
      name: "destforumid",
      class: "primary",
      tabindex: "1"
   })
   .insertAfter("#primeiro");
   
   var cats = $("#primeiro option");
   
   $("#primeiro").on("change", function(){
      
      var opt = $(this)
                .find("option:selected")
                .nextUntil(".d0"),
          htm = '';

      if(opt.length == 0){
         htm = $(this)
               .find("option:selected")
               .clone();
      }else{
         $(opt).each(function(i,e){
            htm += e.outerHTML;
         });
      }

      $("#destforumid")
      .empty()
      .append(htm)
      .find("option")
      .show();

   }).trigger("change");
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blockrow">
   <label for="destforumid">Fórum de Destino:</label>
   <select id="destforumid" name="destforumid" class="primary" tabindex="1">
      <option value="5" class="d0">Feedback (Categoria)</option>
      <option value="23" class="d0">Fórum de Estudos (Categoria)</option>
      <option value="7" class="d1">&nbsp; &nbsp; Anúncios e Enquetes</option>
      <option value="19" class="d1">&nbsp; &nbsp; Fale Conosco (Link)</option>

      <option value="10" class="d0">Designs (Categoria)</option>
      <option value="14" class="d2">&nbsp; &nbsp; &nbsp; &nbsp; Pedidos</option>
      <option value="29" class="d3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Atendidos (Sem Postagem)</option>
   </select>
</div>

6
  • Esse segundo select teria que ser inserido no código html, visto que essas mudanças só podem ser feitas via javascript e não no próprio código da página. A pagina é carregada com um único menu, e o javascript deve executar essas mudanças, teria como você atualizar este código para fazer isso? Não consegui aqui pois o segundo menu não existe.
    – Florida
    Commented 11/03/2018 às 1:11
  • Resposta atualizada.
    – Sam
    Commented 11/03/2018 às 1:22
  • Não deu muito certo, os dados são dinâmicos, então o <select id="primeiro"... não pode ter esses valores predefinidos. O menu é carregado como demonstrei na pergunta, em html, tudo o que vamos modificar na pagina tem de ser em javascript, pois não posso inserir nada predefinido nela como um segundo select, tudo deve ser feito com javascript. Não sei se fui claro, por favor me diga se tiver alguma duvida.
    – Florida
    Commented 11/03/2018 às 1:48
  • O código js acima acha que existe esse id="primeiro" no html, mas ele não tem, a não ser que coloquemos via javascript, o que vem no html é o menu padrão como mostrei na pergunta, acho que o problema esta sendo isso.
    – Florida
    Commented 11/03/2018 às 1:51
  • 1
    Não tinha me atentado a isso... alterei a resposta
    – Sam
    Commented 11/03/2018 às 1:54

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 .