Filtrando as respostas de um select através de outro select

TOTVS Fluig Documentos (ECM)
, ,
1

Boa tarde, estou criando um formulario com 3 campos(construtora/ obra/ torre) através de select.


                               <label for="txtNome">Construtora </label>
                                    <select class="form-control" name="construtora" id="construtora">
                                     <option value="">Selecione!</option>
                                     <option value="1">CONSTRUTORA PAULO MAKOTO</option>
                                     <option value="2">ECCO BRAZ CONSTRUÇÃO E INCORPORAÇÃO    </option>
                                     <option value="3">EZTEC ENGENHARIA/SAO PAULO-SP</option>
                                    </select>
                             </div>
                             <div class="col-md-4 pd_her">
                                   <label for="txtNome">Obra </label>
                                    <select class="form-control" name="obra" id="obra">
                                     <option value="">Selecione!</option>
                                     <option value="1">Condominio das Figueiras</option>
                                     <option value="2">Parque das Araucarias</option>
                                     <option value="3">Quality House Ana Costa</option>
                                     <option value="4">Residencial Alameda</option>
                                     <option value="5">Residencial Botânica</option>
                                     <option value="6">Residencial Jardim</option>
                                     <option value="7">Residencial Praça</option>
                                     <option value="8">Residencial Reserva</option>
                                        </select>
                             </div>
                             <div class="col-md-4 pd_her">
                                  <label for="txtNome">Torre </label>
                                    <select class="form-control" name="torre" id="torre">
                                     <option value="">Selecione!</option>
                                     <option value="1">Atlântica</option>
                                     <option value="2">Bromelia</option>
                                     <option value="3">Condominio das Figueiras</option>
                                     <option value="4">Flamboyant</option>
                                     <option value="5">Flora</option>
                                     <option value="6">Ingá</option>
                                     <option value="7">Iris</option>
                                     <option value="8">Lotus</option>
                                     <option value="9">Orquidea</option>
                                     <option value="10">Parque das Araucarias</option>
                                     <option value="11">Quality House Ana Costa</option>
                                     <option value="12">Residencial Alameda</option>
                                    </select>
                             </div>

Só que preciso filtrar as respostas dos campos "Obra" e "Torre" dependedo da resposta do campo "Construtora"

Ex: Se construtora for = "CONSTRUTORA PAULO MAKOTO" as respostas no campo de "obra" só pode aparecer "Condominio das Figueiras" ou "Parque das Araucarias".

Alguem poderia me dar uma força nesse problema?

:warning: Atenção: Esta publicação foi transferida automaticamente do fórum antigo, mas os anexos não foram incluídos.

2

Boa tarde João, Você pode tentar utilizar o evento .change() do jquery no campo "Construtora" para popular dinamicamente os outros campos. Você pode também criar um dataset customizado e utilizar campos zoom filtrados. Abraço!

3

Boa tarde Kanaãn… terias algum exemplo para eme passar?

4

Crie arrays com os valores possíveis, e conforme o resultado do onChange do primeiro campo, popule os outros dois com o array correspondente. Julgo melhor pois o conteúdo do array pode vir de onde achar mais fácil: dataset, chumbado no código, ou até uma consulta sql:

HTML


                                    <select class="form-control" name="Empresa" id="Empresa" required style="display: none">
                                    </select>



        preencheSelect = function(array){
            $(arrays[0].texto).hide();
            $(arrays[0].select).append($('<option value="" disabled selected hidden> - Selecione uma opção...</option>'));
            var x = arrays[0].opcoes;
            for(var indexx in x){
                var y = x[indexx];
                for(var indexy in y){
                    $(arrays[0].select).append($("<option></option>").text(y[indexy][arrays[0].descricao]).val(y[indexy][arrays[0].descricao]));
                }
            }
        };
5

Tentei fazer um código didático aqui. As duas respostas acima são bem interessantes, pois ao contrário do que eu faço eles deixam todas as opções disponíveis e vão escondendo conforme a necessidade.

Já neste exemplo eu monto o combo (SELECT) conforme a escolha da opção. Realmente não sei se é a melhor opção, mas é mais uma alternativa pra você avaliar:


<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Teste "combos" encadeados</title>
        <script>

            // Valores (a fonte aqui deve vir de um dataset customizado, porém para este exemplo trabalharei com array bidimensional)            
            // Construtoras (idConstrutora, nomeConstrutora) - Dataset
            function dtsListaConstrutoras() {
                var construtora = [["1", "CONSTRUTORA 1 - ABC"],
                                   ["2", "CONSTRUTORA 2 - DEF"],
                                   ["3", "CONSTRUTORA 3 - GHI"]];
                return construtora;
            }

            // Obras (idObra, nomeObra, idConstrutora) - Dataset
            function dtsListaObras() {
                var obra = [["1", "OBRA 1 - ABC", "1"],
                            ["2", "OBRA 2 - DEF", "1"],
                            ["3", "OBRA 3 - GHI", "1"],
                            ["4", "OBRA 4 - JKL", "2"],
                            ["5", "OBRA 5 - MNO", "2"],
                            ["6", "OBRA 6 - PQR", "3"],
                            ["7", "OBRA 7 - STU", "3"]];
                return obra;
            }

            // Torres (idTorre, nomeTorre, idObra) - Dataset
            function dtsListaTorres() {
                var torre = [["1", "TORRE 1 - ZYX", "1"],
                             ["2", "TORRE 2 - WVU", "1"],
                             ["3", "TORRE 3 - TSR", "2"],
                             ["4", "TORRE 4 - QPO", "3"],
                             ["5", "TORRE 5 - NML", "5"],
                             ["6", "TORRE 6 - KJI", "5"],
                             ["7", "TORRE 7 - HGF", "6"],
                             ["8", "TORRE 8 - EDC", "6"],
                             ["9", "TORRE 9 - BAZ", "6"]];
                return torre;
            }

            // Inicializando o formulário
            function iniciaForm() {
                // Construtoras
                var campoSelect = document.getElementById("cmbConstrutora");
                limparCombo(campoSelect);
                montarCombo(campoSelect, dtsListaConstrutoras());
                // Obras (apenas limpa o campo)
                campoSelect = null;
                campoSelect = document.getElementById("cmbObra");
                limparCombo(campoSelect);
                // Torres (apenas limpa o campo)
                campoSelect = null;
                campoSelect = document.getElementById("cmbTorre");
                limparCombo(campoSelect);
            }

            // Modificando construtora
            function modificaConstrutora(construtora) {
                // Obras
                var campoSelect = document.getElementById("cmbObra");
                limparCombo(campoSelect);
                montarCombo(campoSelect, dtsListaObras(), construtora);
                // Torres (apenas limpa o campo)
                campoSelect = null;
                campoSelect = document.getElementById("cmbTorre");
                limparCombo(campoSelect);
            }

            // Modificando obra
            function modificaObra(obra) {
                // Torres
                var campoSelect = document.getElementById("cmbTorre");
                limparCombo(campoSelect);
                montarCombo(campoSelect, dtsListaTorres(), obra);
            }

            // Montando o combo (SELECT)
            function montarCombo(campoCombo, listaValores, filtro) {
                // Adicionar novos elementos ao campo
                if (campoCombo != null) {
                    var novoElemento = document.createElement("option");
                    novoElemento.value = "";
                    novoElemento.text = "-- Escolha a opção --";
                    campoCombo.options.add(novoElemento);
                    for (var i in listaValores) {
                        novoElemento = null;
                        novoElemento = document.createElement("option");
                        if (filtro == null || filtro == "" || listaValores[i][2] == filtro) {
                            novoElemento.value = listaValores[i][0];
                            novoElemento.text = listaValores[i][1];
                            campoCombo.options.add(novoElemento);
                        }
                    }
                }
            }

            // Limpando o combo (SELECT)
            function limparCombo(campoCombo) {
                // Limpa o campo caso existam valores
                while (campoCombo.length) {
                    campoCombo.remove(0);
                }
            }

        </script>
    </head>
    <body onload="iniciaForm();">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <label>Construtora</label>
                    <br />
                    <select name="construtora" id="cmbConstrutora" onchange="modificaConstrutora(this.value);">
                        <option value="" selected="selected"> -- Escolha a opção -- </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <br />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Obra</label>
                    <br />
                    <select name="obra" id="cmbObra" onchange="modificaObra(this.value);">
                        <option value="" selected="selected"> -- Escolha a opção -- </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <br />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Torre</label>
                    <br />
                    <select name="torre" id="cmbTorre">
                        <option value="" selected="selected"> -- Escolha a opção -- </option>
                    </select>
                </td>
            </tr>
        </table>
    </body>
</html>
6

Observe que crio uma “chave estrangeira” para fazer a filtragem dos registros. Na obra a chave estrangeira é a construtora e na torre a chave estrangeira é a obra.

7

Deu super certo Cassio e o código ficou perfeito!! O detalhe da chave estrangeira faz toda a diferença.

8

Pode dá um Exemplo com DATASET ???