Send selected value in select to mvc controller

Question

The code:

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

My problem:

I have 2 select, The second is dynamically populated based on the value chosen in the first.

I am sending the selected values via ajax to the controller.

The first is sending correctly, as seen in the photo but the second has not yet been chosen when it makes the ajax request, so it returns null.

What I have tried: I created a new function in . change of the second select to send the selected value and send a fetch to the mvc controller

The code with the second function was like this

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

But still does not send the selected value The mistake now is this:

I also tried to replace:

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

for:

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

and:

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

Ps: the second select is being populated but does not send to the back end.

Answer 1

Just to register I managed to solve, the problem was that the controller was not sending the value inside the value="" of select,

as the value to be written and the value of the option is the same I did the following:

Replaces

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

for:

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

Does not send to controller yet but can already select the selected value as seen in the photo

These are the 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>

Answer 2

Now I managed to solve totally, I had to make another ajax call to send the data to the controller with fetch not right because the controller is waiting for a Json.

the full working code:

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