segunda-feira, 29 de agosto de 2016

Carregando ComboBox com Ajax

Objetivo
Criar um combobox do qual suas opções depende da seleção de outro campo como por exemplo a relação de seleção Estado e Cidade. Nesse exemplo é necessário que o usuário selecione o estado e o sistema busque as cidades cadastradas naquele estado. Nesse post vamos desenvolver uma solução sem acesso à banco de dados. Ao fazer download dos arquivos, existe um código comentado que instrui o carregamento de informações buscando os dados a partir do MySql.

Tecnologia aplicada

Estrutura de arquivos:
index.html => Arquivo com o formulário;
carregaCidade.php => Arquivo responsável por receber o estado selecionado e retornar as cidades.

Desenvolvimento
Arquivo: index.html
Nesse arquivo vamos criar os campos para seleção de estado e seleção de cidade. No campo de seleção de estado, vamos configurar no evento onChange. Essa configuração dispara um evento ao selecionar uma opção no ComboBox. 

No JavaScript, vamos criar uma função carregaCidade e vincular a mesma ao atributo onChange do ComboBox de Estado. Essa função receberá o valor selecionado no ComboBox e realizará uma requisição Ajax através da função load. No load passamos 2 parâmetros, onde o primeiro é o script php responsável por carregar o combo de cidade e o segundo parâmetro é onde vamos passar o estado selecionado pelo usuário. A função então fica assim:

function carregaCidade(sgEstado){
$('#cmbCidade').load("carregaCidade.php", {estado : sgEstado});
}

O código completo do arquivo ficará da seguinte maneira:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Combo com Ajax e jQuery</title>
    
<!-- jQuery -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
function carregaCidade(sgEstado){
$('#cmbCidade').load("carregaCidade.php", {estado : sgEstado});
}
</script>
</head>
<body>
Estado:
<select id="cmbEstado" name="cmbEstado" onChange="carregaCidade(this.value)">
    <option value="0">Selecione...</option>
        <option value="MG">Minas Gerais</option>
        <option value="RJ">Rio de Janeiro</option>
        <option value="SP">São Paulo</option>
    </select><br><br>
    Cidade:
<select id="cmbCidade" name="cmbCidade">
    <option value="0">Selecione o estado...</option>
    </select>
</body>
</html>

Feito isso, já temos nosso arquivo com o formulário.

Arquivo: carregaCidade.php
Nesse arquivo vamos receber o estado selecionado com o $_POST e retornar os options com o código e nome das cidades:

<?php
$estado = $_POST['estado']; //captura o estado selecionado a partir do nome do parâmetro configurado no $.load.
switch($estado){
case 'MG':
?>
            <option value="1">Ipatinga</option>
                <option value="2">Belo Horizonte</option>
                <option value="3">Governador Valadares</option>
            <?php
break;
case 'RJ':
?>
            <option value="4">Rio de Janeiro</option>
                <option value="5">Volta Redonda</option>
                <option value="6">Petrópolis</option>
            <?php
break;
case 'SP':
?>
            <option value="7">São Paulo</option>
                <option value="8">Santos</option>
                <option value="9">Ribeirão Preto</option>
            <?php
break;
}
?>

Feito isso está pronto nossos ComboBox.
Obrigado!
Até a próxima.









Nenhum comentário: