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<class="d0">Feedback (Categoria)</option>
<option value="23" class="d0">Fórum de Estudos (Categoria)</option>
<option value="7" class="d1"> Anúncios e Enquetes</option>
<option value="19" class="d1"> Fale Conosco (Link)</option>
<option value="10" class="d0">Designs (Categoria)</option>
<option value="14" class="d2"> Pedidos</option>
<option value="29" class="d3"> 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?