O que eu preciso fazer é o seguinte, tenho um select com os Estados, quando a pessoa mudar esse Estado eu preciso preencher outro select com as Cidades.
Esse é o select do Estado :
<div class="input-group">
<select class="selectpicker dropdown" data-live-search="true" id="selectEstado">
@foreach (Estado estado in Model.Cidade.Estados)
{
if (estado.EstadoId == Model.Cidade.EstadoId)
{
<option selected value="@estado.EstadoId">@estado.Nome</option>
}
else
{
<option value="@estado.EstadoId">@estado.Nome</option>
}
}
</select>
</div>
</div>
A função que estou tentando fazer é a seguinte :
$("#selectEstado").change(function () {
var lang = $("select option:selected").val();
$("#language").text(lang);
$.getJSON("/Cidade/GetCidadePorEstado?EstadoId=" + lang, null, function (cb) {
$("#selectCidade").html(cb.CidadeNome);
console.log(cb);
});
});
Ele esta entrando na controller do C# e retornando uma model com todas as cidades, mas não sei o como proceder depois, eu tento verificar o valor do cb mas não estou conseguindo, tenho pouco conhecimento nessa área se alguém puder me dar uma força.
Desde de já eu agradeço
EDIT Assim está agora mina função
$("#selectEstado").change(function () {
var EstadoId = $("select option:selected").val();
$("#language").text(EstadoId);
$.getJSON("/Cidade/GetCidadePorEstado?EstadoId=" + EstadoId, null, function (cb) {
$("#selectCidadeNovo").append('<option value="' + cb.CidadeNome + '">' + cb.CidadeNome + '</option>');
console.log(cb);
});
});
o log
esta mostrando um objeto CidadeNome:Array[141]
que são os Nomes das Cidades que eu recebi do cb
mas não muda os nomes das Cidades.
Por padrão os dois select ja vem com valores porque esta tela e de editar cliente, então este cliente já possui uma cidade, então quando mudar o estado preciso recarregar a o select da cidade com o novo callback
Assim e o select que precisa ser alterado:
<div class="form-group">
<div class="input-group">
<select class="selectpicker dropdown" data-live-search="true" id="selectCidade">
@foreach (Cidade cidade in Model.Cidade.Cidades)
{
if (cidade.CidadeId == Model.Cidade.CidadeId)
{
<option selected value="@cidade.CidadeId">@cidade.Nome</option>
}
else
{
<option value="@cidade.CidadeId">@cidade.Nome</option>
}
}
</select>
</div>
</div>