2

Tenho dois combobox no qual o segundo possui um carregamento em cascata isto é, quando eu seleciono algo no primeiro, é feita um consulta no banco e os dados devem preencher o segundo... Minha controller parece estar devolvendo um array json corretamente, mas acho que na hora de fazer o loop (bloco JS) não estou conseguindo carregar corretamente o segundo bombobox (id="contatoTipo")... Alguém sabe como me ajudar?

inserir a descrição da imagem aqui

Controller:

[HttpPost]
[Route("pessoa-fisica-gerenciar/getContatoTipo")]
public IActionResult getContatoTipo(PessoaFisicaFormaContato pessoaFisicaFormaContato)
{
    var pessoasFisicasFormasContatos = new SelectList(_pessoaFisicaFormaContatoTipoAppService.GetAllByPessoaFisicaContato(pessoaFisicaFormaContato), "Id", "ContatoTipo", 0);
    return Json(new
    {
        data = pessoasFisicasFormasContatos
    });
}

DropDowns:

<div class="col-md-3">
    <label asp-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.PessoaFisicaFormaContato" class="control-label lb-pessoa-fisica-forma-contato">Forma de Contato</label>
    <select  id="pessoaFisicaFormaContatoTipo" asp-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.PessoaFisicaFormaContato" asp-items="@Model.PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.FormasContatos" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow sel-pessoa-fisica-forma-contato"></select>
    <span asp-validation-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.PessoaFisicaFormaContato" class="text-danger val-pessoa-fisica-forma-contato"></span>
</div>
<div class="col-md-3">
    <label asp-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.ContatoTipo" class="control-label lb-contato-tipo">Tipo de Contato</label>
    <select id="contatoTipo" asp-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.ContatoTipo" asp-items="@Model.PessoaFisicaViewModel.PessoasFisicasContatosTipos" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow sel-contato-tipo"></select>
    <span asp-validation-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.ContatoTipo" class="text-danger val-contato-tipo"></span>
</div>

JS:

<script>
    $(document).ready(function () {
        $("#pessoaFisicaFormaContatoTipo").on("change", function () {
            $list = $("#contatoTipo");
            $.ajax({
                url: "/pessoa-fisica-gerenciar/getContatoTipo",
                type: "POST",
                data: { pessoaFisicaFormaContato: $("#pessoaFisicaFormaContatoTipo").val() },
                traditional: true,
                success: function (result) {
                    $list.empty();
                    $.each(result, function (i, item) {
                        $list.append('<option value="' + item["Id"] + '"> ' + item["ContatoTipo"] + ' </option>');
                    });
                    console.log(result);
                },
                error: function () {
                    alert("Something went wrong call the police");
                }
            });
        });
    });
</script>
6
  • O retorno não é "value" e "text"? aqui não deveria ser $list.append('<option value="' + item["value"] + '"> ' + item["text"] + ' </option>');
    – Barbetta
    23/01/2019 às 22:50
  • Olá @Barbetta! Tentei fazer conforme sua sugestão, mesmo assim, após carregar, quando eu inspeciono o campo, ele fica assim: <option value="undefined"> undefined </option>
    – Master JR
    23/01/2019 às 22:54
  • item.text tbm?
    – Barbetta
    23/01/2019 às 23:11
  • Igual....... :(
    – Master JR
    23/01/2019 às 23:20
  • é.. ai tem que debugar rsrs
    – Barbetta
    23/01/2019 às 23:26

1 Resposta 1

2

tenta mudar seu success:

success: function (data) {
            var itens = "<option>Selecione Contato</option>";
            $.each(data, function (i) {
                itens += "<option value= " + data.id + "> " + data.contatoTipo + " </option>";
            });

            $("#contatoTipo").html(itens);
        },

http://prntscr.com/mckobi

5
  • Obrigado @Luks Indie :)
    – Master JR
    27/01/2019 às 20:40
  • deu certo? só não sei formatar texto ainda nessa plataforma kkk
    – Luks Indie
    27/01/2019 às 22:07
  • kkk Rapaz, eu apanhei...Mas antes de colar os fontes, vc joga no notepadd++ e dá tab em tudo... Se vc der tab em todas as linhas e colar aqui ele entende que tem que selecionar tudo de cinza o fonte... srsrs
    – Master JR
    27/01/2019 às 22:35
  • Ok, tive bastante dificuldade com Dropdownlist em cascata, entre outras coisas, não sabia nada de JavaScript, estou aprendendo bastante coisas, esta facilitando muito minha vida no "projetinho" de estudo que estou fazendo (.NET MVC). Precisar de ajuda só chamar, se eu puder ajudar vou ajudar rsrs.
    – Luks Indie
    28/01/2019 às 13:39
  • Valeu @Luks Indie :)
    – Master JR
    29/01/2019 às 16:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .