Problema para carregar lista de cidade do estado selecionado, não carrega as cidades!

Front-end
#1

Boa tarde.

Tenho um formulário em que ao selecionar um estado devem ser listados em outro select as cidades. Mas não ta funcioando, já comparei com outros códigos ai pelos fóruns… parece tudo certo.

O HTML:

<div class="SelectCidade" style="width: 442px"> <fieldset> <select name="contato.cidade" id="cidade" style="width: 442px"> <option value="0">Selecione...</option> </select> </fieldset> </div>

O JavaScript:

[code] function carregaCidades() {
var estado = document.formContato.estado;
var url = “/contato/listaCidades/” + estado.value;

		$.getJSON(url, {estado : estado.value, random : Math.random()}, function(dados) {
			var options = [];
			
			alert('Teste: ');
			
			$.each(dados, function(key, cidade) {
				alert('Teste: ' + cidade.descricao);
				options.push('<option value="' + cidade.id + '">' + cidade.descricao + '</option>');
			});

			document.formContato.cidade.append(options.join(''));
		});
	}[/code]

O controller:

[code] @Path("/contato/listaCidades/{estado}")
public void listaCidades(String estado) {
List cidades = new CidadeDAO().listaCidadesPorEstado(estado);

	System.out.println("Cidade" + cidades.get(0));
	
	result.use(Results.json()).withoutRoot().from(cidades).serialize();
}[/code]

Coloquei um alert, as cidades estão sendo listadas, mas não carrega o select. Alguém vê algum problema?

#2

No HTML, esse é o código do select de estados:

[code]
Selecione…

                                            <c:forEach var="estado" items="${estados}">
                                            	<option value="${estado}" >${estado}</option>
                                            </c:forEach>												
                                        </select>[/code]
#3

Pessoal, percebi que o problema esta aqui:

$(function() { $('#identificacao').selectmenu({style:'dropdown'}); $('#estado').selectmenu({style:'dropdown'}); $('#cidade').selectmenu({style:'dropdown'}); });

se comentar a parte $('#cidade').selectmenu({style:'dropdown'}); ai funciona. Mas preciso dessa formatação, há alguma maneira de ajustar isso?

#4

Consegui resolver, chamando $('#cidade').selectmenu({style:'dropdown'}); depois de carregar os itens.

#5