Editar registro com menu select

[Artes Ussler 1]

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:

 

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.

[Artes Ussler 1]

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.

[Omar~ 87]

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?

[Artes Ussler 1]

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:

 

[Omar~ 87]

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.