Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde
Achei um código na web que permite definir quais itens que aparecem em um menu select através do que é selecionado em outro menu select. Seria como na imagem:
/monthly_2020_04/select.png.2ce0d407110245d315ff5827beb58f3b.png" />
Eis o código completo e funcionando:
<form method="post" action="">
<select name="categoria" id="sel1" onchange="giveSelection(this.value)">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<select name="subcategoria" id="sel2">
<option data-option="1" value="1">Subitem 1</option>
<option data-option="1" value="2">Subitem 2</option>
<option data-option="2" value="3">Subitem 3</option>
<option data-option="2" value="4">Subitem 4</option>
<option data-option="3" value="5">Subitem 5</option>
<option data-option="3" value="6">Subitem 6</option>
</select>
</form>
<script type="text/javascript">
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');
function giveSelection(selValue) {
sel2.innerHTML = '';
for (var i = 0; i < options2.length; i++) {
if (options2[i].dataset.option === selValue) {
sel2.appendChild(options2[i]);
}
}
}
giveSelection(sel1.value);
</script>
Testei este código em um sistema de cadastro de produtos, e funciona muito bem. Esse sistema também possui uma página para a edição dos dados destes produtos, e é aí que surgiu o problema.
Ao abrir a página de edição, eu uso esse mesmo código *select , *mas acrescento nele **selected="selected"** para então exibir o item correspondente ao produto editado.
O problema está no segundo select, que ao invés de imediatamente mostrar o subitem correspondente ao que está marcado no primeiro select, ele mostra sempre o último subitem da lista.
Não sei se conseguiram entender tudo isso, mas se alguém puder ajudar, fico grato.Deixa eu ver se entendi....
O seletor "categoria" tem lá suas opções, mas o seletor "subcategoria" não.
Ao alterar "categoria" obtemos seu value, então "subcategoria" terá as opções correspondentes ao atributo "data"
Resumo: "seletor" no valor for 1, as opções de "subcategoria" só vão existir as que forem data-option="1"
É isso?
Se for, de onde e como vão ser as opções do segundo seletor?
Porque essas opções devem ser criadas e injetadas dentro do segundo seletor, mas criar-las com qual informação?
>
1 hora atrás, Omar~ disse:
Resumo: "seletor" no valor for 1, as opções de "subcategoria" só vão existir as que forem data-option="1"
É isso?
Correto, mas no processo de CADASTRO do item, como mencionei, funciona perfeitamente. Minha dificuldade está no processo de EDIÇÃO do registro.
Vamos supor a situação: eu fiz um cadastro usando ITEM 2 (categoria) e o SUBITEM 4 (subcategoria). No momento que abro a página de edição desse registro, no menu de categoria deverá aparecer então o ITEM 2 selecionado (o qual consegui fazer) e no menu das subcategorias deveria aparecer então o SUBITEM 4 selecionado, mas acaba aparecendo como selecionado o item 1 e todos os demais itens da lista.
Fiz uma representação abaixo:
/monthly_2020_09/menus.png.a3d5e3259077bf21cb85f9177c4201a6.png" style="width:600px;height:auto;" alt="menus.png.a3d5e3259077bf21cb85f9177c4201a6.png" />
Como eu disse:
- De onde vem a informação da sub-categoria e como isso é obtido?
Pois bem, independente dessa minha pergunta, qualquer dados deve está presente o javascript para que quando alterar o valor de categoria temos algo para preencher as subcategorias.
Optei por um JSON com os dados para subcategoria, onde apenas tenho um índice para saber que sub-categoria pertence a cada categoria.
Usei o PHP, para criar o json, mas a abordagem fica só com o javascript mesmo.
No mais o exemplo eu escrevi em cada linha o que é feito (espero que seja algo como isso)
Spoiler
<?php
$categorias = [
['id' => 1, 'nome' => 'Categoria 1'],
['id' => 2, 'nome' => 'Categoria 2'],
['id' => 3, 'nome' => 'Categoria 3'],
['id' => 4, 'nome' => 'Categoria 4']
]; ['id' => 1, 'relacao' => 1, 'nome' => 'Sub-Categoria 1'],
['id' => 2, 'relacao' => 1, 'nome' => 'Sub-Categoria 2'],
['id' => 3, 'relacao' => 2, 'nome' => 'Sub-Categoria 3'],
['id' => 4, 'relacao' => 2, 'nome' => 'Sub-Categoria 4'],
['id' => 5, 'relacao' => 3, 'nome' => 'Sub-Categoria 5'],
['id' => 6, 'relacao' => 3, 'nome' => 'Sub-Categoria 6'],
['id' => 7, 'relacao' => 4, 'nome' => 'Sub-Categoria 7'],
['id' => 8, 'relacao' => 4, 'nome' => 'Sub-Categoria 8'],
['id' => 9, 'relacao' => 4, 'nome' => 'Sub-Categoria 9'],
['id' => 10, 'relacao' => 4, 'nome' => 'Sub-Categoria 10']
];
$dados = json_encode($subcategoria);
?>
<select name="categoria" id="categoria">
<option value="">Selecione a Categoria...</option>
<?php
foreach ($categorias as $value) {
echo ("<option value=\"{$value['id']}\">{$value['nome']}</option>");
}
?>
</select>
<select name="subcategoria" id="subcategoria"></select>
<script>
var valoresEmJson = JSON.parse('<?= $dados ?>'), // Então aqui eu tenho o JSON com todas sub-categorias
categoria = document.getElementById('categoria'),
subcategoria = document.getElementById('subcategoria');
function subValor(e) {
var valor = e.target.value; // Obtenho o valor da "categoria"
if (valor) { // Vejo se "categoria" tem mesmo algum valor
removeOpcao(); // Primeiro limpar todas opções inseridas
valoresEmJson.forEach(function (indice) { // Pecorro o JSON
if (indice.relacao == valor) { // Quando a relação dos índices em "subcategoria" for igual ao valor selecionado
// Mando criar novas opções em "subcategoria"
// Enviando como parâmetro o id e o nome, no índice do JSON
criarOpcao(indice.id, indice.nome);
}
});
}
}
function removeOpcao() { // Apenas limpa as opções do seletor "subcategoria"
while (subcategoria.childNodes.length) {
subcategoria.removeChild(subcategoria.firstChild);
}
}
function criarOpcao(id, nome) {
var novoOption = document.createElement('option'); // Crio a tag <option>
novoOption.value = id; // Seu valor é o "id" do índice obtido por parâmetro
novoOption.innerText = nome; // O texto é o nome do índice obtido por parâmetro
subcategoria.appendChild(novoOption); // Anexo a opção dentro do seletor subcategoria
}
categoria.addEventListener('change', subValor, false); // Quando o seletor categoria é alterado
if (categoria.selectedIndex) { // Se algum valor no seletor "categoria" estiver como a propriedade "selected"
var evento = new Event('change'); // Crio o evento "change"
categoria.dispatchEvent(evento); // Despacho o evento sem mesmo o usuário alterar o seletor
}
</script>
Note que a categoria 4 possui 4 sub categorias e as demais somente 2, pois o que interessa é saber a relação, pois é isso de determina a qual categoria um sub pertence.
Bom dia!
Gostaria de rever essa dúvida que postei em abril desse ano. Faz tempo, mas ainda estou precisando disso.
Será que alguém sabe como me ajudar a resolver? Eu já tentei, sério, mas infelizmente sem sucesso.