0

Estou populando um SELECT à partir dum JSON recebido via AJAX da seguinte forma:

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

Estou tentando atribuir o SELECTED nessas options, porém sem sucesso. Utilizando:

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

Ou mesmo com .attr('selected','selected') e recebo o erro:

Uncaught SyntaxError: missing ) after argument list

Continuando as tentativas:

.prop("selected", "selected")   

Uncaught TypeError: $(...).val(...).html(...).prop is not a function

4
  • Você quer fazer o selected apenas do primeiro item? já tentou fazer um callback? 5/07/2016 às 18:18
  • Quer o select em um option com um valor em especifico?
    – Miguel
    5/07/2016 às 18:20
  • @GabrielRodrigues eu irei atribuir a um valor em específico, não tentei callback. 5/07/2016 às 18:21
  • Sim, @Miguel. Exatamente. 5/07/2016 às 18:22

3 Respostas 3

1

Eu costumo fazer isso sem utilizar tantas tags Jquery, particularmente me perco menos com html. Faria algo do tipo:

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

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

Uma abordagem boa é percorrer o for criando apenas uma váriavel que conterá todo o objeto option a ser inserido no html. esta opção tem mais desempenho por não estar acessando a cada loop o html para inserir um novo valor.

Como o item selecionado pode ser apenas um da para definir um if com a condição de sua escolha para que este item seja o selecionado.

Exemplo:

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>

Referência: Criar elemento no HTML com JavaScript (appendChild vs innerHTML)

1

Creio que deve ser isso

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>

Fiquei sem perceber bem se quer mais do que uma opção selecionada. De qualquer maneira aqui está para várias opções (note o "multiple" no <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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .