How to assign "Selected" to a dynamic option?

Question

I’m populating a SELECT from a JSON received via AJAX as follows:

$.each(parsedData, function(i, produto) {
    $('select#produtos').append(
        $('<option></option>').val(produto.cod_produto).html(produto.descricao)
    );
});

I’m trying to assign the SELECTED in those options, but without success. Using:

$('<option></option>').val(produto.cod_produto).html(produto.descricao).attr('selected', true)

Or even with .attr('selected','selected') and I get the error:

Uncaught Syntaxerror: Missing ) after argument list

Continuing the attempts:

.prop("selected", "selected")   

Uncaught Typeerror: $(...). val(...). html(...). prop is not a Function

Answer 1

I usually do this without using so many Jquery tags, particularly I get lost less with html. I would do something like:

 var selected = "";
 if(isSelected){
  selected="selected";
 }

$('select#produtos').append("<option value='"+produto.cod_produto+"' " +selected+" >"+produto.descricao+"</option>");

Answer 2

I think that must be it

var val_produto = 3; // value do produto que queremos selecionar
var descricao = 'produto muito bom';
var opts = '';

for(var i = 0; i < 10; i++) { // tento simular o seu ciclo each
   opts += '<option value="' +i+ '">' +descricao+ '_' +i+ '</option>';
}

$('select#produtos').append(opts); // fazemos o append a todas as opts depois do ciclo para não ficar muito pesado
// o produto que tem o valor val_produto vai ficar selected
$('select#produtos option[value="' +val_produto+ '"]').attr('selected', 'selected');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="produtos">
</select>

I was not sure if you want more than one option selected. Anyway here is for several options (note the "multiple" in the <select>):

var val_produtos = [1, 3, 7, 9]; // value dos produtos que queremos selecionar
var descricao = 'produto muito bom';
var opts = '';

for(var i = 0; i < 10; i++) { // tento simular o seu ciclo each
   if(val_produtos.indexOf(i) > -1) {
       opts += '<option value="' +i+ '" selected>' +descricao+ '_' +i+ '</option>';
   }
   else {
       opts += '<option value="' +i+ '">' +descricao+ '_' +i+ '</option>';
   }
}

$('select#produtos').append(opts); // fazemos o append a todas as opts depois do ciclo para não ficar muito pesado

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="produtos" multiple>
</select>

Answer 3

A good approach is to go through the for creating only one variable that will contain the entire option object to be inserted into html. this option has more performance because it is not accessing every loop the html to insert a new value.

As the selected item can be just one da to set an if with the condition of your choice for this item to be the selected one.

Example:

var parsedData = [{
  cod_produto: 1,
  descricao: "Item 1"
}, {
  cod_produto: 2,
  descricao: "Item 2"
}, {
  cod_produto: 3,
  descricao: "Me Seleciona!"
}, {
  cod_produto: 4,
  descricao: "Item 4"
}];

var option = "";

$.each(parsedData, function(key, val) {
  if (val.cod_produto === 3) {
    option += '<option value=' + val.cod_produto + ' selected>' + val.descricao + '</option>';
  } else {
    option += '<option value=' + val.cod_produto + '>' + val.descricao + '</option>';
  }
});

$("#select").append(option);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="select">

</select>

Reference: Create HTML element with Javascript (appendchild vs innerHTML)