Get select multiple values with JQuery

Question

I have a problem with JQuery, I have a multiple select that i can populate in 2 ways, manually taking some value from another select with a add button, and dynamically, with parsing a json returned from a spring call. I have no problem to take the value when I add it manually, but, when I populate dynamically the select, the JQuery code doesn't take any value although int the html code there're values in the select.

Here my code:

The empty html selects

<div id="enti_disp_box">
  <label>Enti disponibili</label>
  <select id="ente" multiple> </select>
  <button class="btn" onclick="addEnteInBox();" type="button">Aggiungi</button>
</div>

<div id="enti_att_box">
  <label>Enti attivi*</label> 
  <select id="entiAttivi" multiple></select>
  <button class="btn" onclick="removeEnteInBox();" type="button">Rimuovi</button>
</div>

JQuery for populate the second select manually

function addEnteInBox(){
   var selectedOptions = document.getElementById("ente");
   for (var i = 0; i < selectedOptions.length; i++) {
       var opt = selectedOptions[i];
       if (opt.selected) {
           document.getElementById("entiAttivi").appendChild(opt);
           i--;
       }
   }
}
function removeEnteInBox(){
   var x = document.getElementById("entiAttivi");
   x.remove(x.selectedIndex);
}

JQuery for populate the second select dynamically

function getEntiByIdUtente(idutente) {
    var action = "getEntiByidUtente";
    var payload = {
        "idUtente": idutente,
        "action": action,
        "token": token
    };
    $.ajax({
        type: "POST",
        url: '../service/rest/enti/management_utenti',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(payload),
        resourceType: 'json',
        success: function(obj, textstatus) {
            obj = obj.trim();
            var json = JSON.parse(obj);
            //parse response
            if (obj.stato == 'error') {
                alert('Errore');
            } else {
                $('#entiAttivi').empty();
                //fetch obj.data and populate table
                $(json.data).each(function() {
                    $("#piva").val(this.piva);
                    $("#codiceipa").val(this.codiceipa);
                    $('#entiAttivi').append($('<option>', {
                        value: this.idente,
                        text: this.ragionesociale
                    }));
                });
            }

            return json;

        },
        error: function(obj, textstatus) {
            alert('Errore di comunicazione col server!');
        }
    });
}

JQuery for taking the value of the second select

var entiList = $("#entiAttivi").val();

Answer 1

This line seems to be wrong, it's not working for me

$('#entiAttivi').append($('<option>', {
    value: this.idente,
    text: this.ragionesociale
}));

would you try replacing by

$('#entiAttivi').append($('<option value="' + this.idente + '">' + this.regionesociale + '</option>');

The append, is trying to create an option with the json as parent, this is not working. please try my code.