4

Estou precisando utilizar um select dinâmico na minha página, no qual ao selecionar o estado(UF), ele me mostra no próximo select somente as cidades desta UF. Da mesma forma os bairros. Todas essas informações já estão no banco de dados.

Estou utilizando o CodeIgniter, e já tentei de várias formas, mas não consegui fazer. Alguém poderia me indicar um tutorial, ou me passar algumas instruções?

VIEW

<script type="text/javascript">
        var site_url = '<?php echo site_url() ?>'; 
        function search_cidades(uf){
            var uf = uf;
            $.post(site_url+"/clientes/search_cidades_uf", {
                uf : uf
            },function(data){
                $('#cCidade').html(data);
            });
        }
    </script>
    <div class="col-lg-1">
      <div class="form-group">
        <label for="">UF</label>
        <select style="text-transform:uppercase" name="cUf" class="form-control input cUf" id="cUf" onchange='search_cidades($(this).val())'>
          <option>...</option>
            <?php foreach($ufs_item as $uf):
              if($uf['uf'] == $clientes_item['uf']){ ?>
                <option value="<?= $uf['uf'] ?>" selected><?= $uf['uf']; ?></option>
              <?php } else{ ?>
                <option value="<?= $uf['uf'] ?>"><?= $uf['uf']; ?></option>
              <?php } endforeach;?>
        </select>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="form-group">
        <label for="">CIDADE</label>
        <select style="text-transform:uppercase" name="cCidade" class="form-control input cCidade" id="cCidade">
        </select>
      </div>
    </div>

CONTROLLER

class Clientes extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model('clientes_model');
        $this->load->model('cnaes_model');
        $this->load->model('bairros_model');

    }


    public function listar_cliente($codigo) {

        $data['clientes_item'] = $this->clientes_model->get_clientes($codigo);
        $data['cnaes_item'] = $this->cnaes_model->get_cnaes();
        $data['bairros_item'] = $this->bairros_model->get_bairros();
        $data['ufs_item'] = $this->localizacao_model->get_ufs();

        if (empty($data['clientes_item'])) {
            show_404();
        } else {
            $data['codigo'] = $data['clientes_item']['codigo'];
            $this->load->view('inc/header_view', $data);
            $this->load->view('clientes/listar_cliente', $data);
        }
    }

    public function search_cidades_uf(){

        $this->load->model("localizacao_model");
        $uf = $this->input->post("uf");
        $cidades = $this->localizacao_model->get_cidades_uf($uf);

        $option = "<option value=''></option>";
        foreach($cidades -> result() as $linha) {
            $option .= "<option value='$linha->codigo_cidade'>$linha->cidade</option>";         
        }

        echo $option;
    }
}

MODEL

class Localizacao_model extends CI_Model {

    public function __construct() {
        $this->load->database();
    }

    public function get_ufs() {
        $this->db->order_by("uf", "asc");
        $query = $this->db->get("tb_conf_ufs");
        return $query->result_array();
    }

     public function get_cidades() {
        $this->db->order_by("cidades", "asc");
        $query = $this->db->get("tb_conf_cidades");
        return $query->result_array();
    }

    public function get_cidades_uf($uf) {


        $this->db->where("uf", $uf);

        $this->db->order_by("cidades", "asc");

        $query = $this->db->get("tb_conf_cidades");
                return $query->result_array();
    }

}

ShupUpMagda, minha dúvida é: na linha do codigo que você sugeriu

$data['clientes_item'] = ['uf'=>'UF_DA_CIDADE_NO_DB'];//Faça seu $this->clientes_model->get_clientes($codigo) //retornar isso seguindo o padrão já visto acima

Voc~e pede para fazer em get_Clientes(Model) o mesmo que você fez get_Cidades(Model), mas meu get_clientes possui muitas informações, ou seja:

$data[] = [
                'codigo' => $item['codigo'],
                'data-cadastro' => $item['data-cadastro'],
                'data-atualizacao' => $item['data-atualizacao'],
                'razao-social' => $item['razao-social'],
                'nome-fantasia' => $item['nome-fantasia'],
                'cnpj' => $item['cnpj'],
                'ie' => $item['nome-fantasia'],
                'cnae' => $item['nome-fantasia'],
                'situacao' => $item['nome-fantasia'],
                'data-abertura' => $item['nome-fantasia'],
                'data-baixa' => $item['nome-fantasia'],
                'faturamento' => $item['nome-fantasia'],
                'capital-social' => $item['nome-fantasia'],
                '' => $item['nome-fantasia'],
                'nome-fantasia' => $item['nome-fantasia'],
                'nome-fantasia' => $item['nome-fantasia']

]

Tenho mesmo que descrever todos campos do banco ou o result_array já faz isto? Pois no seu codigo você usou o Result_Array e depois foreach.

5
  • 2
    Posta aí como tentou fazer que o pessoal te guia.
    – Woss
    Commented 16/02/2017 às 19:32
  • 1
    Mostra sim o que tentou, senão não vamos acreditar que você tentou várias formas. A comunidade não costuma ajudar quem não tentou, mas como você tentou, só falta postar sua tentativa. Aguardo!
    – user26552
    Commented 16/02/2017 às 19:36
  • 1
    Perguntar dessa forma (sem mostrar o que tentou) é o mesmo que pedir pra fazer por você. Mostre o que já fez pra que as pessoas possam auxiliar no restante. Começar o trabalho do zero não é "ajudar". Commented 17/02/2017 às 1:00
  • Pessoal, incluí o código que estou usando... fiz um teste com o campo uf, e ao selecionar ele mostra através do ALERT, qual estado estou enviando via post. Como disse, o campo de cidades nao aparece nenuma cidade, mesmo marcando o UF. Commented 20/02/2017 às 18:39

1 Resposta 1

2

Minha sugestão: Como seu select vai usar dados pré-cadastrados faça isso sem request. A simples criação de uma caixa de seleção não deve demandar múltiplas requisições e consultas ao banco (é o que eu penso).

Entenda: A requisição seria interessante se vc precisasse, por exemplo, que o usuário cadastrasse novos estados e cidades no momento do uso do form, e que o campo precisasse ser constantemente atualizado, o que não parece ser o caso.

Faça seu model carregar os dados num ARRAY:

public function get_cidades() {
  $data = [];
  $this->db->order_by("cidades", "asc");
  $query = $this->db->get("tb_conf_cidades");
  //The cat's leap: crie um array igual ao que eu pus na resposta
  foreach($query->result_array() as $item){
    $data[] = [
      'uf' => $item['UF_DA_CIDADE_NO_DB'],
      'nome' => $item['NOME_DA_CIDADE_NO_DB']
    ];
  }
  return $data;
}

OBS: o que foi feito com get_cidades() pode ser feito com get_ufs().

Faça seu controller carregar os dados na view:

function combo($codigo){
        $data['title'] = 'Combobox Dinâmico';
        # Supondo que 'cidades' e 'ufs_item' são os dados do banco
        $data['ufs_item'] = $this->localizacao_model->get_ufs();
        $data['cidades'] = $this->localizacao_model->get_cidades();
        $data['clientes_item'] = $this->clientes_model->get_clientes($codigo);
        $this->template->load('templates/default/index', 'pages/combo', $data);
    }

Faça sua view usar os dados carregados para criar e manipular os campos:

<script type="text/javascript">
    //Dados passados pelo controller
    $estados = <?=json_encode($ufs_item)?>;//Todos os estados
    $cidades = <?=json_encode($cidades)?>;//Todas as cidades
    $clientUf = '<?=$clientes_item['UF_DO_CLIENTE']?>';//Cidade do cliente 
    //Manipulação do DOM
    $(function(){
        //Checa o valor de 'clientUf' e preenche 'cCidade' ao carregar
        search_cidades($clientUf);
        // Cria as OPTIONS de #cUf
        $('<option>').val('').text('').appendTo('#cUf');
        $.each($estados, function(key,val){
            //Checa o valor de 'clientUf'
            if($clientUf === val.uf){ $selected = true;}
            else {$selected = false; }
            //Cria o combo com os dados de 'estados' checando 'clientUf'
            $('<option>').val(val.uf).text(val.uf).attr('selected',$selected).appendTo('#cUf');
        });
        // Comportamento do SELECT ao mudar de uf
        $('#cUf').change(function(){
            search_cidades(this.value);
        });
    });
    // Captura as cidades de cada UF
    function search_cidades(uf){
        $('#cCidade').find('option').remove();
        $.each($cidades, function(key,val){
            if(uf === val.uf){
                //Substitui as OPTIONS do 'cCidade'
                $('<option>').val(val.uf).text(val.nome).appendTo('#cCidade');
            }
        });
    }
</script>
<div class="col-lg-1">
    <div class="form-group">
        <label for="">UF</label>
        <select id="cUf" style="text-transform:uppercase" name="cUf" class="form-control input cUf"></select>
    </div>
</div>
<div class="col-lg-3">
    <div class="form-group">
        <label for="">CIDADE</label>
        <select id="cCidade" style="text-transform:uppercase" name="cCidade" class="form-control input cCidade"></select>
    </div>
</div>

Está tudo comentado no JavaScript, e vc não deve ter dificuldades pra implementar.

7
  • Obrigado amigo, vou implantar suas observações e se tiver alguma dúvida volto para postar. Commented 21/02/2017 às 14:54
  • Qual a melhor forma de gerar esse array usando os dados que ja tenho no banco? Commented 24/02/2017 às 14:19
  • No CodeIgniter a melhor forma é usando um model. Commented 24/02/2017 às 14:21
  • Seguindo a linha que 'ShutUpMagda' sugeriu, queria saber qual a melhor forma de gerar esta lista no proprio codigo(Array), assim como ele fez. Iria abandonar de vez a consulta no banco para esta funcionalidade. Quero criar isto no codigo de forma automatica: $data['cidades']=[ 0 => ['uf'=>'SP','nome'=>'Cidade SP 1'], 1 => ['uf'=>'SP','nome'=>'Cidade SP 2'], 2 => ['uf'=>'SP','nome'=>'Cidade SP 3'], ]; Commented 6/03/2017 às 19:55
  • Mano, o model já te dá isso pronto, é só você usar o resultado de get_cidades()... Commented 6/03/2017 às 20:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .