1

O Sistema:

Eu tenho um select com alguns option e sub-options (já explico). Esse select é gerado pelo php de acordo com as categorias que são cadastradas no banco de dados, ou seja, eu tenho a CATEGORIA 01 mas nessa categoria eu cadastro uma subcategoria, então ela fica como Subcategoria 01, se eu cadastrar nessa subcategoria uma outra subcategoria, ela fica como SubSubcategoria 01 e assim infinitamente.

Na geração do HTML,no select, todos eles vem como option (não aninhado um dentro do outro como na UL > LI > UL > LI, etc).

O select fica assim:

<select id="selecao">
    <option value="cat1">Eletronicos</option>
        <option value="sec1">Informática</option>
            <option value="prod1">Monitores</option>
            <option value="prod2">Gabinetes</option>
    <option value="cat2">CATEGORIA 02</option>
</select>

Eu preciso capturar o value da categoria dos produtos, isto é, se eu clicar no option Monitores a minha variavel no javascript vai capturar o value da categoria de produtos (São aqueles marcados como cat1 e cat2)

EDIT:

Estrutura do banco de dados:

No banco eu tenho uma tabela que gravas as categorias, cada categoria tem um id, um parent_id e um depth

o parent_id diz à qual categoria pai ela está associada e o depth diz qual o nível da categoria

  • Eletronico tem parent_id = null e depth = 0
  • Informática é subcategoria de Eletronico então tem parent_id = 1 (pq id de Eletronico no banco é 1) e depth = 1
  • Monitores é subcategoria da subcategoria Informática e por isso tem parent_id = 10 (porque o id de Informática no banco de dados é 10) e depth = 2

Essa é a ideia de relacionamento das categorias na tabela.

Agradeço a todos que puderem ajudar.

Eu não achei pergunta similar que ajude a resolver esse problema, se você souber de alguma que vai me ajudar, marque aqui. Obrigado

10
  • 1
    E se o cara selecionar "Eletronicos" ou "Informática"?
    – Sam
    Commented 18/03/2019 às 14:53
  • 1
    Lougans, nessa forma em que todos estão no mesmo select será considerado como sendo "irmãos" sem diferentes níveis de parentescos. Como está sua estrutura no banco? e uma sugestão: que tal quebrar em vários selects, dependendo da categoria pai selecionada ele exibe outro select filho (se houver) associado aquele pai? Commented 18/03/2019 às 14:55
  • 1
    Então independente da opção marcada, você quer pegar cat1, cat2 etc..?
    – Sam
    Commented 18/03/2019 às 15:00
  • 1
    Ah sim, deu pra entender melhor. Se você quer só pegar o nome da categoria, que tal você colocar no próprio value, ao invés de "prod1" ou "prod2" o "cat1" somente? colocar no value a própria categoria Commented 18/03/2019 às 15:12
  • 1
    Mas os values serão sempre assim nesse padrão: cat1, sec1, prod1, prod2, cat2 etc...?
    – Sam
    Commented 18/03/2019 às 15:22

1 Resposta 1

1

Sem mexer no HTML não tem como fazer isso, porque você não tem nenhuma referência pra saber que um option é relacionado a outro anterior, porque são todos elementos irmãos. Você resolveria isso colocando apenas uma classe na option que representa uma categoria, por exemplo:

<select>
   <option class="cats" value="123">CATEGORIA 1</option>
   ... options da cat1
   <option class="cats" value="456">CATEGORIA 2</option>
   ... options da cat2
</select>

Com essa classe fica bem fácil pegar o value com JavaScript, fazendo um loop reverso. Basta pegar o índice do option selecionado e voltar até o primeiro option anterior que possua a classe .cats:

document.getElementById("selecao").onchange = function(){
   var idx = this.selectedIndex;
   if(this.className != "cats"){
      
      for(var x = idx; x > -1; x--){
   
         var opt = this.querySelectorAll("option")[x];
   
         if(opt.className == "cats"){
            var categoria = opt.value;
            break;
         }
         
      }
      
   }else{
      
      var categoria = this.value;
      
   }

   console.log(categoria);
}
<select id="selecao">
    <option class="cats" value="cat1">Eletronicos</option>
        <option value="sec1">Informática</option>
            <option value="prod1">Monitores</option>
            <option value="prod2">Gabinetes</option>
    <option class="cats" value="cat2">CATEGORIA 02</option>
        <option value="sec2">Informática</option>
            <option value="prod3">Monitores2</option>
            <option value="prod4">Gabinetes2</option>
</select>

4
  • Fantástico, isso deu certo. Levei um tempinho para compreender todas as partes da função mas deu tudo certo. Fiz algumas alterações apenas e resolveu o problema. Muuito obrigado Sam. ^^
    – lougansjs
    Commented 18/03/2019 às 17:02
  • Esqueci de colocar a descrição do código, mas é bem fácil de entender. Valew!
    – Sam
    Commented 18/03/2019 às 17:04
  • Sim, bem fácil ^^
    – lougansjs
    Commented 18/03/2019 às 17:05
  • se puder ver sobre esse problema meu aqui tambem, Clique aqui
    – lougansjs
    Commented 18/03/2019 às 20:33

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 .