How do I assign "selected" to a dynamic option?

Question

How do I assign "selected" to a dynamic option?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

0

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 SELECTED to these options , but to no avail. 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

javascript jquery html-select

asked by anonymous 05.07.2016 / 20:12

3 answers

1

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

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

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><selectid="select">

</select>

Reference: Create element in HTML with JavaScript (appendChild vs innerHTML)

05.07.2016 / 20:45

1

I think this 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><selectid="produtos">
</select>

I was not quite sure if I wanted more than one selected option. Anyway here is for several options (note the " multiple " in <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><selectid="produtos" multiple>
</select>

05.07.2016 / 20:28

UICollectionViewController 3 columns auto layout How to make a login screen and password

score 1 · Accepted Answer

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

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

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