Programação WEB é à Quinta-feira!

Por Pedro Peixoto para o PPLWARE

Aprenda a preencher um elemento <select> com concelhos depois de ser seleccionado o distrito

É muito frequente a necessidade de, em formulários HTML, questionar o utilizador acerca da sua morada. Quando se pretende uma base de dados organizada, isenta de erros e fácil de usar, é usual separar essa informação em localidade, concelho, distrito, código postal para além de restringir a introdução de dados através de elementos <select> que evitam uma introdução livre por parte do utilizador. Vamos então aprender a preencher um elemento <select> com concelhos depois de ser seleccionado o distrito. Para isso vamos continuar a trabalhar com jQuery e integrá-lo com PHP, finalmente vamos começar a ver como podemos fazer coisas fantásticas facilmente usando uma linguagem server side e a biblioteca JS mais famosa do mundo.

Até há algum tempo atrás era muito frequente ver páginas a serem actualizadas aquando da escolha do distrito, de forma a carregar os concelhos correspondentes. Era igualmente possível implementar essa funcionalidade carregando logo todos os concelhos possíveis e usar javascript para depois actualizar o <select>, no entanto estávamos a carregar informação que não era necessária, a atrasar o carregamento da página e a forçar o servidor desnecessariamente. O AJAX veio permitir fazer isto de uma forma instantânea através de um novo pedido http e actualização do conteúdo do <select> sem actualizar a página. O jQuery veio ainda facilitar tudo isto tornando tudo mais simples. Vamos então ao que interessa. Antes de mais precisávamos de uma base de dados com os concelhos e distritos relacionados. Para facilitar as coisas e assimilar apenas o que realmente interessa vamos usar neste exemplo arrays já carregados com os concelhos e distritos.

Para começar vamos criar o mini-formulário onde o utilizador fará a selecção do distrito. Criamos inicialmente um elemento <select> com todos os distritos, carregados a partir de um array PHP.

<select id="distritos">
	<?php
			$distritos=array('','Aveiro','Beja','Braga','Bragança','Castelo Branco','Coimbra','Évora','Faro','Guarda','Leiria','Lisboa','Portalegre','Porto','Santarém','Setúbal','Viana do Castelo','Vila Real','Viseu','Ilha da Madeira','Ilha de Porto Santo','Ilha de Santa Maria','Ilha de São Miguel','Ilha Terceira','Ilha da Graciosa','Ilha de São Jorge','Ilha do Pico','Ilha do Faial','Ilha das Flores','Ilha do Corvo');
 
	foreach($distritos as $distrito)
		echo '<option value="' . $distrito . '">' . $distrito . '</option>';
	?>
</select>

Adicionamos ainda um elemento <span> com o id ‘concelhos’ que irá apresentar no final a lista dos concelhos relativas ao distrito escolhido.

<span id="concelhos">
</span>

Para testar vamos guardar a página com o nome ‘index.php’. Eis o resultado:

Esquecemos por momentos esta página e vamos agora criar uma outra página PHP que dado um distrito por parâmetro escreva um elemento <select> com os concelhos respectivos.

Obtemos o distrito escolhido através do método GET:

$distrito=$_GET['distrito'];

De seguida necessitamos de um array que faça a associação entre os distritos e os concelhos que lhe pertencem (exemplifico com Aveiro, Lisboa e Viseu mas no ficheiro fonte tem o array completo):

$concelhos['Aveiro'] =array('Águeda','Albergaria-a-Velha','Anadia','Arouca','Aveiro','Castelo de Paiva','Espinho','Estarreja','Santa Maria da Feira','Ílhavo','Mealhad','Murtosa','Oliveira de Azeméis','Oliveira do Bairro','Ovar','São João da Madeira','Sever do Vouga','Vagos','Vale de Cambra');

$concelhos['Lisboa']=array('Arruda dos Vinhos','Azambuja','Cadaval','Cascais','Lisboa','Loures','Lourinhã','Mafra','Oeiras','Sintra','Sobral de Monte Agraço','Torres Vedras','Vila Franca de Xira','Amadora','Odivelas');

$concelhos['Viseu'] =array('Armamar','Carregal do Sal','Castro Daire','Cinfães','Lamego','Mangualde','Moimenta da Beira','Mortágua','Nelas','Oliveira de Frades','Penalva do Castelo','Penedono','Resende','Santa Comba Dão','São João da Pesqueira','São Pedro do Sul','Sátão','Sernancelhe','Tabuaço','Tarouca','Tondela','Vila Nova de Paiva','Viseu','Vouzela');

E fazemos então a construção de um <select> com o distrito escolhido:

echo '
<select>';
foreach($concelhos[$distrito] as $concelho)
	echo '
<option value="' . $concelho . '">' . $concelho . '</option>
 
';
echo '</select>
 
';

Guardamos esta página com o nome “concelhos.php”. Testando o script com “Aveiro” o resultado é o esperado. (Atenção que há diferenciação entre maiúsculas e minúsculas no nome dos distritos).

Temos então os ficheiros PHP prontos, vamos agora juntar um pouco de jQuery para completar. Incluímos então no head do ficheiro “índex.php” o jQuery:

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
</head>

Para programar o evento JS que actualizará a lista de concelhos vamos usar apenas jQuery.

Como vimos nos artigos anteriores é necessário fazê-lo entre as tags <script>. O evento a usar será o .change() que será disparado quando o distrito for alterado.

<script>
	$('#distritos').change(function(){
						alert('mudei para ' + this.val()); 
					});
</script>

Vamos agora modificar o conteúdo do evento changede modo a conseguir o nosso objectivo. Como nós pretendemos que o <span> “concelhos” passe a ter o conteúdo da página PHP “concelhos.php” vamos usar a função .load(), ela permite colocar num determinado elemento o conteúdo do URL passado por parâmetro, usando AJAX. Não podemos esquecer que temos de indicar à pagina “concelhos.php” qual o distrito a consultar.

<script>
   $('#distritos').change(function(){
	$('#concelhos').load('concelhos.php?distrito='+escape($(this).val()));
   });
</script>

De notar que usámos a função JS escape para evitar erros, uma vez que existem nomes de cidades com espaços, esta função coloca a string no formato url. E temos finalmente o formulário feito. Vamos experimentar :

Tudo está como o desejado e com uma velocidade fantástica. Gostaram? Aguardo o vosso feedback.
Download: scripts