Select (combobox) Dynamic

Question

Select (combobox) Dynamic

Navigation

#1 by (2 votes)

4

I need to use a dynamic select on my page, in which when I select the state (UF), it shows me in the next select only the cities of this UF. In the same way the neighborhoods. All of this information is already in the database.

I'm using CodeIgniter, and I've tried it in many ways, but I could not do it. Could someone give me a tutorial, or give me some instructions?

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, my question is: in the line of code you suggested

$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

You are asked to do in get_Clients (Model) the same as you did get_Cities (Model), but my get_clients has a lot of information, that is:

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

]

Do I even have to describe all fields in the database, or does result_array already do this? For in your code you used the Result_Array and then foreach.

php mysql codeigniter

asked by anonymous 16.02.2017 / 20:27

1 answer

Change function with ion-selection-option MVVM, Should I use ICommand on all controls?

score 2 · Answer 1

My suggestion: How your select will use pre-registered data do this without request . The simple creation of a checkbox should not require multiple requests and queries to the bank (that's what I think).

Understand: The request would be interesting if you needed, for example, that the user register new states and cities at the time of using form , and that the field needs to be updated constantly, which seems to be the case.

Make your model load the data into an 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: What was done with get_cidades() can be done with get_ufs() .

Make your controller load the data in 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);
    }

View use the uploaded data to create and manipulate the fields:

<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>

It's all commented out in JavaScript , and you should not have any difficulties implementing it.