Select HTML + PHP

Programação PHP
, , , ,
#1

Galera,

Estou com o seguinte problema e não encontrei uma solução ideal, gostaria da ajuda de vocês.

Tenho dois combos (estado, cidade), quando efetuo o cadastro funciona legal, mas quando recupero os dados eu gostaria que a cidade já fosse carregada conforme o estado selecionado, porém é necessário que todas as demais cidades daquele estado também sejam listadas.
Bom com o estado eu consegui fazer isso, mas com a cidade não então é este problema que preciso resolver com a ajuda de vocês.

Primeiro vou mostrar a View do cadastro

<div class="col-xs-12 col-sm-3">
    <div class="form-group">
        <label for="estado">Estado</label> <span class="required">*</span>
        <select id="estado" class="form-control" name="estado">
            <option value="">Selecione</option>
            <?php foreach($estados as $estado) { ?>
            <option value="<?php echo $estado->uf_id ?>"><?php echo $estado->uf_nome ?></option>
            <?php } ?>
         </select>
    </div>
</div>
<div class="col-xs-12 col-sm-4">
    <div class="form-group">
        <label for="cidade">Cidade</label> <span class="required">*</span>
        <select name="cidade" id="cidade" class="form-control" disabled="">
            <option value="">Escolha seu estado</option>
        </select>
    </div>
</div>

Utilizo um script para listar as cidades, que está no footer

$(document).ready(function () {
    $('#estado').on('change', function () {
        var id_estado = $(this).val();
        if (id_estado == '') {
            $('#cidade').prop('disabled', true);
        } else {
            $('#cidade').prop('disabled', false);
            $.ajax({
                url: "<?php echo base_url('cidade'); ?>",
                type: "POST",
                data: {'id_estado': id_estado},
                dataType: 'json',
                success: function (data) {
                    $('#cidade').html(data);
                },
                error: function () {
                    alert('Ops! Algo deu errado, tente novamente!');
                }
            });
        }
    });
});

Meu Model possui duas funções:

public function getEstado() {
    $this->db->from('uf');
    return $this->db->get()->result();
}

public function getCidade($data) {
    $this->db->from('cidade');
    $this->db->where('uf_id', $data, false);
    return $this->db->get()->result();
}

E no Controller eu faço o retorno das cidades para View

function __construct() {
    parent::__construct();
    $this->load->model('Cidade_model', 'cidade');
}

public function index() {
    $id_estado = $this->input->post('id_estado');
    $cidades = $this->cidade->getCidade($id_estado);
    if(count($cidades) > 0) {
        $option = '';
        $option .= '<option value="">Escolha sua cidade</option>';
        foreach($cidades as $cidade) {
            $option .= '<option value="' . $cidade->cid_id . '">' . $cidade->cid_nome . '</option>';
        }
        echo json_encode($option);
    }
}

Para o cadastro isso serve, porém quando recupero os dados do banco para exibir em uma View de edição eu não consigo deixar selecionado a cidade.

Vamos para a View de edição

<div class="col-xs-12 col-sm-3">
    <div class="form-group">
        <label for="estado">Estado</label> <span class="required">*</span>
        <select id="estado" class="form-control" name="estado">
            <option value="">Selecione</option>
            <?php foreach($estados as $estado) { ?>
            <option value="<?php echo $estado->uf_id ?>" <?php echo $paciente->uf_id == $estado->uf_id ? 'selected':''; ?>><?php echo $estado->uf_nome ?></option>
            <?php } ?>
        </select>
    </div>
</div>
<div class="col-xs-12 col-sm-4">
    <div class="form-group">
    <!-- aqui não consigui a solução ideal para mostrar a cidade do estado já carregado e as demais cidades também -->
        <label for="cidade">Cidade</label> <span class="required">*</span>
        <select name="cidade" id="cidade" class="form-control" disabled="">
            <option value="">Escolha seu estado</option>
        </select>
    </div>
</div>

Seria isto galera

Desde já fica meu agradecimento pela atenção e auxilio.

Abraço

#2

carrega novamente o combo de cidades chamando um ajax ao selecionar um estado diferente, e assim consegue fazer querys para cidades e estados diferenciados.

#3

Opa, havia esquecido de finalizar este post, já consegui resolver o problema.

#4