How to get the value of a UF list through the ZIP Code query via Ajax?

Question

I am developing an address form where the user type the zip code and automatically fills other fields, via Ajax. The problem is I can’t get the value of UF, which in my case is a list.

my example code:

  <fieldset>
<legend>Endereco:</legend>

    @Html.Label("Cep: ")
    @Html.TextBoxFor(e => e.CEP, new { maxlength = "9", id = "Cep", name = "Cep", })       
<br/> 

    @Html.Label("Endereco: ")
    @Html.TextBoxFor(e => e.DescricaoEndereco, new { maxlength = "50", id = "Endereco", name = "Endereco" })

    <br />
    @Html.Label("Número: ")
    @Html.TextBoxFor(e => e.Numero, new { maxlength = "50", id = "Numero" })
    <br />
    @Html.Label("Complemento: ")
    @Html.TextBoxFor(e => e.Complemento, new { maxlength = "50", id = "Complemento" })
    <br />
    @Html.Label("Logradouro: ")
    @Html.TextBoxFor(e => e.Logradouro, new { maxlength = "5", id = "Logradouro" })
    <br />

    @Html.Label("Bairro: ")
    @Html.TextBoxFor(e => e.Bairro, new { maxlength = "50", id = "Bairro", name = "Bairro" })
    <br />
    @Html.Label("Cidade: ")
    @Html.TextBoxFor(e => e.Cidade, new { maxlength = "40", id = "Cidade", name = "Cidade" })
    <br />
    @Html.Label("UF: ")
    @Html.DropDownListFor(e => e.UF, Model.UFList, new { id = "UF",name="UF" })

Javascript code:

$(document).ready(function () {

    $("#zipcode").blur(function () {

        consulta = $("#zipcode").val()
        consulta = consulta.replace("-", "");

        var url = "http://cep.correiocontrol.com.br/" + consulta + ".json";

        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json',
            success: function (json) {
                $("#street").val(json.logradouro)
                $("#district").val(json.bairro)
                $("#city").val(json.localidade)
                $("UF").val(json.UF)
                switch (json.UF) {
                    case "AC":
                        $("#UF").val("Acre")
                        break;
                    case "AL":
                        $("#UF").val("Alagoas")
                        break;
                    case "AP":
                        $("#UF").val("Amapá")
                        break;
                    case "AM":
                        $("#UF").val("Amazonas")
                        break;
                    case "BA":
                        $("#UF").val("Bahia")
                        break;

                    case "CE":
                        $("#UF").val("Ceará")
                        break;
                    case "DF":
                        $("#UF").val("Distrito Federal")
                        break;
                    case "ES":
                        $("#UF").val("Espírito Santo")
                        break;
                    case "GO":
                        $("#UF").val("Goiás")
                        break;
                    case "MA":
                        $("#UF").val("Maranhão")
                        break
                    case "MT":
                        $("#UF").val("Mato Grosso")
                        break;
                    case "MS":
                        $("#UF").val("Mato Grosso do Sul")
                        break;
                    case "MG":
                        $("#UF").val("Minas Gerais")
                        break;
                    case "PA":
                        $("#UF").val("Pará")
                        break;
                    case "PB":
                        $("#UF").val("Paraíba")
                        break;
                    case "PR":
                        $("#UF").val("Paraná")
                        break;
                    case "PE":
                        $("#UF").val("Pernambuco")
                        break;
                    case "PI":
                        $("#UF").val("Piauí")
                        break;
                    case "RJ":
                        $("#UF").val("Rio de Janeiro")
                        break;
                    case "RN":
                        $("#UF").val("Rio Grande do Norte")
                        break;
                    case "RS":
                        $("#UF").val("Rio Grande do Sul")
                        break;
                    case "RO":
                        $("#UF").val("Rondônia")
                        break;
                    case "SC":
                        $("#UF").val("Santa Catarina")
                        break;
                    case "RR":
                        $("#UF").val("Roraima")
                        break;
                    case "SP":
                        $("#UF").val("São Paulo")
                        break;
                    case "SE":
                        $("#UF").val("Sergipe")
                        break;
                    case "TO":
                        $("#UF").val("Tocantins")
                        break;

                    default:
                        $("#UF").val("")
                }

            },
        });

    });
});

Answer 1

Partner, since your Status field is a list, you cannot use . val(), you will need to SELECT an item from your list. Try the following:

Swap your entire switch case for the line below:

$("#UF option[value='"+json.UF+"']").attr("selected", true);

-- I don’t particularly like $.ajax() very much, I prefer to use the:

$.getJSON( "url.php", function(data){});

I can handle the return. But you can use the . done(), . error() and . fail() methods of $.ajax(). So if it doesn’t fall into Success, it comes to error or fail.