1

O código:

$(function () {
  $('#IdiomaOrigem').change(function () {
        var data = $("#IdiomaOrigem").val();
        var destino = $("#IdiomaDestino").val();
                 
        $.ajax({
            url: '/Solicitacao/CarregarViewBags?IdiomaOrigem=' + data + '&IdiomaDestino' + destino,
            success: function (data) {
                var items = "";
                $.each(data, function (i, item) {
                    items += "<option value='" + item.value + "'>" + item.text + "</option>";
                });
                $('#IdiomaDestino').html(items)
               
                
            }
        })
     
  })
})

inserir a descrição da imagem aqui

Meu problema:

Eu tenho 2 select, O segundo é populado dinamicamente com base no valor escolhido no primeiro.

Estou enviando os valores selecionados via ajax para o controlador.

O primeiro está enviando corretamente, como da para ver na foto mas o segundo ainda não foi escolhido quando ele faz a requisição ajax, por isso ele retorna null. erro

O que eu tentei: Criei uma nova função no .change do segundo select para enviar o valor selecionado e enviar fazendo um fetch para o controlador do mvc

O código com a segunda função ficou assim

 $(function () {
      $('#IdiomaOrigem').change(function () {
            var data = $("#IdiomaOrigem").val();
                     
            $.ajax({
                url: '/Solicitacao/CarregarViewBags?IdiomaOrigem=' + data,
                success: function (data) {
                    var items = "";
                    $.each(data, function (i, item) {
                        items += "<option value='" + item.value + "'>" + item.text + "</option>";
                    });
                    $('#IdiomaDestino').html(items)
                   
                    
                }
            })
         
      })
    })
    
   


    $(function () {
        $("#IdiomaDestino").on("change", function (info) {
            var idiomaDestino = $("idiomaDestino").text();
            fetch(`/Solicitacao/CarregaViewBags?IdiomaDestino=${idiomaDestino}`);
        })
    })

Mas ainda não envia o valor selecionado O erro agora é esse:

inserir a descrição da imagem aqui

tentei também substituir:

var idiomaDestino = $("idiomaDestino").text();

por:

var idiomaDestino = $("idiomaDestino").val();

e:

var idiomaDestino = $("#itemDestino").html(items);

Ps: o segundo select esta sendo populado mas não envia para o back end.

3
  • Adicione os códigos diretamente à pergunta (não print). Commented 10/07/2020 às 23:39
  • códigos adicionados
    – Alaexandre
    Commented 11/07/2020 às 0:28
  • os selects também
    – user60252
    Commented 11/07/2020 às 10:29

2 Respostas 2

0

Só para registrar eu consegui resolver, o problema era que o controlador não estava mandando o valor para dentro do value="" do select,

como o valor a ser escrito e o valor do option é o mesmo eu fiz o seguinte:

Substitui

$.each(data, function (i, item) { items += "<option value='" + item.value + "'>" + item.text + "</option>"; });

por:

  $.each(data, function (i, item) {
                        items += "<option value=" + item.text + ">" + item.text + "</option>";
                    });

Ainda não envia para o controlador mas já consegue selecionar o valor selecionado como da para ver na fotoinserir a descrição da imagem aqui

Esses são os 2 select Leo Caracciolo

<select asp-for="Origem" id="IdiomaOrigem" asp-items="@(new SelectList(@ViewBag.Origens))">
        <option>Idioma de Origem</option>
    </select>
    <label asp-for="Origem"></label>
  <select asp-for="Destino" id="IdiomaDestino" asp-items="@(new SelectList(string.Empty))">
        <option>Selecione o destino</option>
    </select>

    <label asp-for="Destino"></label>
0

Agora consegui resolver totalmente, tive que fazer outra chamada ajax para mandar os dados para o controlador com o fetch não da certo porque o controlador está esperando um Json.

o código completo funcionando:

 $(function () {
          $('#IdiomaOrigem').change(function () {
                var data = $("#IdiomaOrigem").val();
                         
                $.ajax({
                    url: '/Solicitacao/CarregarViewBags?IdiomaOrigem=' + data,
                    success: function (data) {
                        var items = "";
                        $.each(data, function (i, item) {
                            items += "<option value=" + item.text + ">" + item.text + "</option>";
                        });
                        $('#IdiomaDestino').html(items)
                       
                        
                    }
                })
             
          })
        })
     
        
     

        $(function () {
            $('#IdiomaDestino').change(function () {
                var Destino = $("#IdiomaDestino").val();
                $.ajax({
                    type: "POST",
                    url: '/Solicitacao/CarregarViewBags?IdiomaDestino=' + Destino,
                    async: true,
                    success: function (result) {

                    }
                })

               

            })
        })
 <div>

        <select asp-for="Origem" id="IdiomaOrigem" asp-items="@(new SelectList(@ViewBag.Origens))">
            <option>Idioma de Origem</option>
        </select>
        <label asp-for="Origem"></label>
       



    </div>






    <div>
        <select asp-for="Destino" id="IdiomaDestino" asp-items="@(new SelectList(string.Empty))">
            <option>Selecione o destino</option>
        </select>

        <label asp-for="Destino"></label>
         
    </div>

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 .