Depois de muito penar, descobri como fazer combobox dinâmicas para JSP.
No exemplo, eu quero que um combo, chamado 'cidade' exiba as cidades contidas no banco, de acordo com o estado que eu selecionar na combo 'uf'.
1º passo: Criar uma página jsp, que faça uma busca na tabela 'cidade', passando como parâmetro (preferencialmente via get) o código da uf:
try{
int codigoUf = Integer.parseInt(request.getParameter("codigo").toString());
List lista = Busca.listaCidades(codigoUf);
out.print("[");
for(int i = 0; i < lista.size(); i++){
if (i != 0) out.print(", ");
out.print("'" + lista.get(i).getNome() + "'");
}
out.print("]");
conexao.close();
} catch (NumberFormatException e){}
obs.: Se o java imprimisse a lista diretamente, ficaria no formato "[ item, item, item ]". Mas o javascript, pelo menos aqui, não reconheceu esse formato. Por isso, eu fiz essa mini gambiarra, para que a saída seja "[ 'item', 'item', 'item' ]", como no PHP.2º passo: Agora, no HTML, basta colocar o seguinte atributo na tag select:
onchange="buscaCidade(this.options[this.selectedIndex].value)"
3º passo: Criar o javascript:
function buscaCidade(tuf){
try{
xmlhttp = new XMLHttpRequest();
} catch(e1) {
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e2){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e3){
xmlhttp = false; //Viva a padronização dos browsers
}
}
}
//limpa a combobox
var c = document.getElementById("cidade")
while( c.options.length > 0) c.options[0] = null
c.options[0] = new Option(" -- Aguarde ... -- "," -- Aguarde ... -- ")
//Monta a url com a uf
xmlhttp.open("GET", "buscacidade.jsp?codigo=" + tuf, true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4){
var c = document.getElementById("cidade")
while(c.options.length > 0) c.options[0] = null
//Transforma a lista de cidades JSON em Javascript
var aCidades = eval((xmlhttp.responseText))
//popula o select com a lista de cidades obtida
for(var i = 0; i < aCidades.length; i++){
aCidades[i] = unescape(aCidades[i])
c.options[c.options.length] = new Option(aCidades[i], aCidades[i])
}
}
}
xmlhttp.send(null)
}
Segundo meus cálculos, agora deve funcionar... Para testar, crie dois combos (uf e cidade), e popule um banco =]
Observações:
1) De repente, você pode precisar utilizar o código da cidade juntamente com o nome, para efetuar cadastros e tals. No exemplo de cima, o jsp só busca o nome da cidade. Pra fazer ele buscar também o código, concatene ele com o nome da cidade, utilizando um caracter bem estranho para separá-los:
out.print("'" + lista.get(i).getCodigo() + "#" + lista.get(i).getNome() + "'");
Daí no .js você coloca:
var str = aCidades[i].split("#");
c.options[c.options.length] = new Option(str[1], str[0])
Onde str[0] (código) será o value do select, e str[1] (nome) será o valor exibido na combo.
2) De repente também, você precise utilizar este javascript em mais de uma combo. Para isso, é só passar o nome do combo que você quer carregar via parâmetro:
onchange="doBusca(this.options[this.selectedIndex].value, 'cidade')"
E alterar o javascript pra receber esse parâmetro.
3) Peguei esse código
daqui, e adaptei um pouco =D.
É isso, té mais o/
