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

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?

criado 20 de Aug de 2018
João Gabriel Silvestre Bezerra
7 pontos
editado 20 de Aug de 2018

Anexos

Fluig.PNG

Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

3 respostas

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>

editar
- x
grosseiro ou ofensivo pouco construtivo obsoleto outro...
Motivo

criado 21 de Aug de 2018
Cassius
105 pontos

0

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.
— Cassius 21 de Aug de 2018

0

Deu super certo Cassio e o código ficou perfeito!! O detalhe da chave estrangeira faz toda a diferença.
— João Gabriel Silvestre Bezerra 21 de Aug de 2018

0

Pode dá um Exemplo com DATASET ???
— Ariel 21 de Mar de 2019

up 0 down
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!
- editar
- x
  
  grosseiro ou ofensivo pouco construtivo obsoleto outro...
  Motivo
- criado 20 de Aug de 2018
  Kanaãm Luz Romero Rodrigues
  925 pontos
- 0
  
  Boa tarde Kanaãn.. terias algum exemplo para eme passar?
  — João Gabriel Silvestre Bezerra 20 de Aug de 2018
Adicionar comentário

Caracteres restantes: 600
Quero acompanhar este tópico via email.

Comentário
Utilize formatação mini-Markdown: [link](http://exemplo.com) _italico_ **negrito** `codigo`.
Comentarios devem ter, no maximo, 600 caracteres. Se achar necessario, utilize links em vez de copiar código ou ainda edite sua pergunta/resposta para colocar mais informações
up 0 down
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]));
                }
            }
        };
```
- editar
- x
  
  grosseiro ou ofensivo pouco construtivo obsoleto outro...
  Motivo
- criado 21 de Aug de 2018
  Tiago Volpi
  376 pontos
Adicionar comentário

Caracteres restantes: 600
Quero acompanhar este tópico via email.

Comentário
Utilize formatação mini-Markdown: [link](http://exemplo.com) _italico_ **negrito** `codigo`.
Comentarios devem ter, no maximo, 600 caracteres. Se achar necessario, utilize links em vez de copiar código ou ainda edite sua pergunta/resposta para colocar mais informações

fluig forum

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

Comentário

3 respostas

Comentário

Comentário

Comentário

Não é a resposta que estava procurando? Procure outras perguntas com as tags select filtrar ou faça a sua própria pergunta.