Popular select baseado em um valor selecionado em outro combobox

[Prove Yourself 0]

Bom dia, tenho 2 campos do tipo select, um guarda o valor das cidades e outro dos bairros. Gostaria de utilizar AJAX para popular o select dos bairros baseado na cidade que o usuário escolheu no select de cidades. Qual a melhor forma de fazer isso? No meu script php estou retornando os bairros da seguinte maneira:

2;Centro;4;Nova Brasília;3;Vila Rau

Ou seja, código do bairro;nome do bairro.

Penso em pegar esses valores do responseText e popular o select dos bairros com eles. Aí eu pergunto: Esta é a melhor forma de fazer isso? É gambiarra? :)

Depois de saber isso e organizar os dados, como faço para adicionar esses valores no outro select? Tentei o método add mas não consegui.

Muito obrigado!

[andreia_sp 1]

Rapaz da uma olhadinha em http://forum.imasters.com.br/index.php?showforum=63 que tem exemplo exatamente disso!

[Prove Yourself 0]

Bom dia, obrigado pela resposta mas fiz sozinho para aprender. Acontece que ocorreu um problema. Estou utilizando o seguinte script js:

carrega_bairros.js

function carrega_bairros() {

var xmlHttp;
try {
	xmlHttp = new XMLHttpRequest();
}
catch(e) {
	try {
		xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e) {
		try {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e) {
			alert('O seu navegador não suporta a tecnologia AJAX.');
		}
	}
}

xmlHttp.onreadystatechange=function() {
	if(xmlHttp.readyState == 4) {
		combo_bairros = document.getElementById('bairro');
		// Remove valores anteriores do combo.
		if(combo_bairros.length) {
			for(i = 0; i <= combo_bairros.length; i++)
				combo_bairros.remove(combo_bairros.options[i])
		}
		// Valores obtidos com AJAX.
		combo = xmlHttp.responseText.split(';');
		// Preenche select com os valores
		if(combo.length != 1) {
			for(i = 0; i < combo.length; i+=2) {
				 var option = document.createElement('option');
				 option.value = combo[i]
				 option.text = combo[i + 1];
				 try {
					 // padrão, com o parâmetro null.
					 combo_bairros.add(option, null);
				 }
				 catch(e) {
					 // Apenas IE, sem parâmetro null.
					 combo_bairros('bairro').add(option);
				 }
			}
		}
	}
}
xmlHttp.open("GET", "carrega_bairro.php?cidade=" + document.getElementById('cidade').value, true);
xmlHttp.send(null);
}

O responseText recebe do script PHP o seguinte texto: codigo;bairro;codigo;bairro... Como exemplo: 1;Centro;2;Vila Rau;3;Nova Brasília.

Quebro esse texto e jogo no select. O número é o valor do option e o nome do Bairro é o seguinte.

O problema é quando seleciono uma cidade que tem bairros e depois seleciono uma cidade que não tem bairros. O último campo da cidade que tem bairros sempre permanece no combo quando seleciono a cidade sem bairros...

Alguém tem alguma idéia do que pode ser? Desculpa, tentei ser o mais claro possível... Abraços.

[Oenning 0]

Eu acho que seria melhor o arquivo carrega_bairro.php montar uma tag <select> e seus <options> e retornar isso para o Ajax, dai você joga isso em uma div.

 

Att,

Guilherme Oenning.