How to add options to a drop-down list using jQuery?

Question

I have a role in jQuery who receives a array from PHP, through the $.post. The array comes like this:

array(
    '0' => array(
        'ID' => '1',
        'NOME' => 'João'
    ),
    '1' => array(
        'ID' => '2',
        'NOME' => 'Maria'
    ),
    '2' => array(
        'ID' => '3',
        'NOME' => 'Marcos'
    ),
) 

How do I stop through jQuery, add option in a select with the data from that array? Example:

<select>
 <option value="ID">"NOME"</option>
</select>

This is the $.post that I’m receiving the array from php

$.post('/consulta/usuario', {id:id}, function(dados){
        alert(dados);
}, 'json');

I’ll get the id according to the option that the user chooses, and next to php I am returning the array:

echo json_encode($usuario);

Answer 1

I assume you receive a PHP JSON, which you have in PHP:

echo json_encode($array);

So in Javascript you can iterate this object like this:

var select = document.querySelector('select');
pessoas.forEach(function(obj) {
    var opt = document.createElement('option');
    opt.value = obj.ID;
    opt.innerHTML = obj.NOME;
    select.appendChild(opt);
});

jsFiddle: https://jsfiddle.net/g26bjL3r/

Answer 2

has two forms, using a tie each or for.

I’ll demonstrate using the for

for(var i = 0; i < data.length; i++) {
    var id    =   data[i]['ID'];
    var name  =   data[i]['NOME'];
    var $option  =  $( '<option />' ).val(id).text(name);
    $( 'select' ).append( $option );
}

I will leave the form of each() by your own, it is a more pleasant implementation, you can search this on the link: Jquery $each()

I hope it helps you