Tenho um select renderizado na view com dados recuperados em um banco de dados. Na tabela em questão estado
, tenho os atributos id
, siglaEstado
e descricaoEstado
. No caso estou usando o id
no value da option
para realizar alterações no banco, como no código:
<div class="form-group col-md-4">
<label for="estado"><span>*</span>Estado:</label>
<select id="estado" class="form-control" name="estado" required>
<option selected>Selecione seu estado</option>
<?php foreach($estados as $estado){?>
<!-- Tentei adicionar esse data-uf para renderizar a opção -->
<option data-uf="<?php echo $estado['siglaEstado'];?>"
value="<?php echo $estado['idEstado'];?>">
<?php echo $estado['descricaoEstado'];?>
</option>
<?php }?>
</select>
</div>
E tenho um script que preenche automaticamente o endereço de acordo com o cep inserido, onde a api retorna um json
contendo a UF do estado.
$("#cep").focusout(function(){
$.ajax({
url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
dataType: 'json',
success: function(resposta){
$("#logradouro").val(resposta.logradouro);
$("#complemento").val(resposta.complemento);
$("#bairro").val(resposta.bairro);
$("#cidade").val(resposta.localidade);
//Aqui eu tentei recuperar o valor no data-attr inserido no html
$("#estado").data("data-uf").val(resposta.uf);
$("#numero").focus();
}
});
});
Tentei colocar um data-
no option mas não consegui preencher o estado.
Como eu faço para preencher esse select de acordo com essa sigla retornada na api sem ter que alterar o value do meu option?