0

Tenho uma tabela criada dinamicamente e dentro dela um select no qual uso um map para criar suas options.

json.map(item => {
 var corpo = '';

 corpo += '<td>';
 corpo += '  <select>';
 arrStatus.map(item => {
   corpo += '  <option value="' + item.freteStatusID + '">' + item.status + '</option>';
 })
 corpo += '  </select>';
 corpo += '</td>'

 //adiciona esta linha na tabela
 $('#tabela').append(corpo);

 $('option[value=' + item.freteStatusID + ']').attr('selected', 'selected');
}

Quando tento usar o .attr dentro do map recebo este resultado com duas options sendo selecionadas

<select>
  <option value="5">Aceito pelo embarcador</option>
  <option value="2">Agendado</option>
  <option value="3">Declinado</option>
  <option value="1" selected="selected">Recebido</option>
  <option value="6" selected="selected">Rejeitado pelo embarcador</option>
  <option value="4">Removido</option>  
</select>
<select>
  <option value="5">Aceito pelo embarcador</option>
  <option value="2">Agendado</option>
  <option value="3">Declinado</option>
  <option value="1" selected="selected">Recebido</option>
  <option value="6" selected="selected">Rejeitado pelo embarcador</option>
  <option value="4">Removido</option>  
</select>

Como posso fazer com que apenas uma option por select fique com o atributo "Selected"?

1 Resposta 1

0

Parece que o seu problema está no $('option[value=' + item.freteStatusID + ']')

Nessa query você está procurando por todos os elementos option com o valor item.freteStatusID na sua página, não apenas dentro do select que você acabou de criar.

Se no primeiro loop você procurar por um option com o valor 1, e no segundo com valor 6, ele irá atribuir a propriedade selected para todos os option presentes na sua página com esse valor.

Você nem precisa fazer essa query separada para adicionar a propriedade no seu elemento, você pode utilizar uma condição durante a construção do seu HTML para adicionar essa propriedade, exemplo:

json.forEach(item => {
 var itemSelecionado = item.freteStatusID;
 var corpo = '';

 corpo += '<td>';
 corpo += '  <select>';
 arrStatus.forEach(item => {
   var selected = item.freteStatusID === itemSelecionado ? 'selected' : '';
   corpo += '  <option ' + selected + ' value="' + item.freteStatusID + '">' + item.status + '</option>';
 });
 corpo += '  </select>';
 corpo += '</td>';

 //adiciona esta linha na tabela
 $('#tabela').append(corpo);
}

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 .