Editar registro com menu select

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.

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']
];

$subcategoria = [

 ['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.