CODEWITHSUNDEEP
jquery
FilippoLcr
FilippoLcr

Reputation: 119

Jquery .append after retrieve a value from <select> with .on('change') don't work properly

I've a list of elements structured in this way: 

<select id="simple_list">
 <option value="val1">Value</option>
 <option value="val2">Value</option> ...

I should put some html element in a div called panel_content strucured as follow: 

<div id="panel_content" class="panel-content"></div>

jQuery to my rescue: 

$('#simple_list').on('change', function() {

    var val = $(this).val();

    switch ( val ) {
        case 'val1':
            $('#panel_content').empty();
            for (var i = 0; i < an_array.length; i++) {
                $('#panel_content').append('<p>' + an_array.places[i] + '</p>');
                console.log('Test');
            }
            break; ....

Note that console.log inside cycle is executed correctly, but in panel_content items are not included.

It seems that .append() is not executed.

Why?

Upvotes: 0

Views: 39

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337713

The issue is in your for loop. Given the format of the an_array variable (which is actually an object), which you state in the comments to be like this:

Array is placed in an object literal: var xxx = { name: "Something", places: ['Moon', 'Earth', 'Mars'] }

Then you need to iterate over the places property, like this:

for (var i = 0; i < an_array.places.length; i++) {
    $('#panel_content').append('<p>' + an_array.places[i] + '</p>');
}

Working example

Upvotes: 1

Related Questions