Fill a select with callback $getJson Asp.Net / Jquery

Question

What I need to do is this, I have a select with the states, when the person changes that state I need to fill another select with the cities.

This is the state select :

                            <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>

The function I’m trying to do is this: :

    $("#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);
    });
});

He is entering the controller of C# and returning a model with all the cities, but I do not know how to proceed later, I try to verify the value of cb but I am not getting, I have little knowledge in this area if someone can give me a strength.

From now on I thank you

EDIT So is now my function

    $("#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);
    });
});

the log this showing an object CidadeNome:Array[141] which are the Names of the Cities that I received from cb but does not change the names of the Cities.

By default the two select already comes with values because this screen and edit client, then this client already has a city, so when changing the status I need to reload the select of the city with the new callback

So and the select that needs to be changed:

 <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>

Answer 1

You can iterate the result of cities received in cb, and instead of using html use append to add a option per city. Example (assuming that the return is an array of cities):

var cb = ["São Paulo","Campinas", "Sorocaba"];
cb.forEach(function(cidade) {
  $("#selectCidade").append('<option value="'+cidade+'">'+cidade+'</option>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectCidade">
</select>

EDITED:

$.getJSON("/Cidade/GetCidadePorEstado?EstadoId=" + EstadoId, null, function (cb) {      
    $("#selectCidadeNovo").clear();
    cb.CidadeNome.forEach(function(cidade){
        $("#selectCidadeNovo").append('<option value="' + cidade + '">' + cidade + '</option>');
    });
 $('.selectpicker').selectpicker('refresh'); //Recarrega o selectpicker com os novos dados
});