Fill a select with callback $ getJson Asp.Net / JQuery [duplicate]

Question

Fill a select with callback $ getJson Asp.Net / JQuery [duplicate]

Navigation

#1 by (2 votes)

2

What I need to do is the following, I have a select with 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 as follows:

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

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

From now on I thank you

EDIT So is now mine 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);
    });
});

log is showing an object CidadeNome:Array[141] which are the Names of Cities that I received from cb but does not change the names of 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 state need to reload the city select with the new callback

So this is 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>

javascript jquery c#

asked by anonymous 08.12.2016 / 12:09

1 answer

Riding .eslintrc, how to write? Call layouts within a modal

score 2 · Accepted Answer

You can iterate the result of cities that is received in cb , and instead of using html use append to add option per city. Example (assuming 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><selectid="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
});