2

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();
4
  • Please add the defination of addEnteInBox() removeEnteInBox(). Commented Nov 30, 2015 at 14:07
  • Are you sure that you call the val() after they are appended ? Commented Nov 30, 2015 at 14:09
  • @Mayank done, but I'm pretty sure that those functions are ininfluent Commented Nov 30, 2015 at 14:14
  • @DanChaltiel yes, the getEntiByIdUtente(idutente) call is at the creation of the page, the val() is called when i press the save button of the form Commented Nov 30, 2015 at 14:15

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

5 Comments

have you check the generated html for the select, have it the value setted? Also what is in entiList after trying to get the val()?
Still not working, my problem isn't in the population of the select, but when i have to take the value from it, here 2 screen The html code of the select dynamically populated link The JQuery when i'm try to do the val() link
the value is in the html also after the val() call
according jquery: The .val() method is primarily used to get the values of form elements such as input, select and textarea. In the case of select elements, it returns null when no option is selected and an array containing the value of each selected option when there is at least one and it is possible to select more because the multiple attribute is present. could be that there is some options with the same value as says jquery?
I solved it, the options in the select aren't selected when the val() was called

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.