1

tenho uma combobox com diversos "valores". Vou "chumbar" valores, só para exemplo. Combobox:

<ul class="nav">
   <li>
      <div>
         <label>Tipo de Nacionalidade</label>
         <select id="comboTipoId" style="max-width: 350px; width: 350px; background-color: #eee; overflow: hidden; max-height: 37px; height: 37px">

         </select>
      </div>
   </li>
</ul>   

Function JS que preenche essa combo (aciono essa function no "onload" da página):

function preencherCampos() {       

   /* Busca em arquivo o preenchimento do combobox "Tipo Nacionalidade" */
   /* 'Chumbando' JSON... */
   var consultaTipoId = '{ "tab" : "00000007", "descr" : "Tipo da Nacionalidade", "itens" : [{ "seq" : "1", "value" : "NACIONALIDADE - PF", "key" : "1" }, { "seq" : "2", "value" : "RESIDENCIA FISCAL - PF/PJ", "key" : "2" }, { "seq" : "3", "value" : "VISTO DE PERMANENCIA - PF", "key" : "4" }, { "seq" : "4", "value" : "PAIS DE CONSTITUICAO - PJ", "key" : "5" }, { "seq" : "5", "value" : "PAIS DE NASCIMENTO - PF", "key" : "9" }] }';
   var jsonRespostaCTI = JSON.parse( consultaTipoId );
   for(var i = 0; i < jsonRespostaCTI.itens.length; i++) {
      // get reference to select element
      var sel = document.getElementById('comboTipoId');

      // create new option element
      var opt = document.createElement('option');

      // create text node to add to option element (opt)
      opt.appendChild( document.createTextNode(jsonRespostaCTI.itens[i].value) );

      // set value property of opt
      opt.value = jsonRespostaCTI.itens[i].key;

      // add opt to end of select box (sel)
      sel.appendChild(opt);
   }
   ordenarTpNac();
}

Function JS para ordenar a combo em ordem alfabética:

function ordenarTpNac() {
   var itensOrdenados = $('#comboTipoId option').sort(function (a, b) {
      return a.text < b.text ? -1 : 1;
   });

   $('#comboTipoId').html(itensOrdenados);
}

O problema é que, após a ordenação, o valor "default" que aparece pro usuário é "VISTO DE PERMANENCIA - PF" (o último valor). Eu queria que ficasse como "default" o "PAIS DE NASCIMENTO - PF" (chave "9"). Como fazer isso? Tentei colocar algo do tipo if(opt.value === "9") { opt.setected = "selected"; } dentro do for da função preencherCampos() mas não deu certo...

1 Resposta 1

1

Antes de fazer o append das options, coloque um if para inserir o atributo selected na option cujo valor seja 9:

if(jsonRespostaCTI.itens[i].key == 9) opt.setAttribute("selected", "");

Irá resultar no HTML:

<option value="9" selected>PAIS DE NASCIMENTO - PF</option>

Veja:

function preencherCampos() {       

   /* Busca em arquivo o preenchimento do combobox "Tipo Nacionalidade" */
   /* 'Chumbando' JSON... */
   var consultaTipoId = '{ "tab" : "00000007", "descr" : "Tipo da Nacionalidade", "itens" : [{ "seq" : "1", "value" : "NACIONALIDADE - PF", "key" : "1" }, { "seq" : "2", "value" : "RESIDENCIA FISCAL - PF/PJ", "key" : "2" }, { "seq" : "3", "value" : "VISTO DE PERMANENCIA - PF", "key" : "4" }, { "seq" : "4", "value" : "PAIS DE CONSTITUICAO - PJ", "key" : "5" }, { "seq" : "5", "value" : "PAIS DE NASCIMENTO - PF", "key" : "9" }] }';
   var jsonRespostaCTI = JSON.parse( consultaTipoId );
   for(var i = 0; i < jsonRespostaCTI.itens.length; i++) {
      // get reference to select element
      var sel = document.getElementById('comboTipoId');

      // create new option element
      var opt = document.createElement('option');

      // create text node to add to option element (opt)
      opt.appendChild( document.createTextNode(jsonRespostaCTI.itens[i].value) );

      // set value property of opt
      opt.value = jsonRespostaCTI.itens[i].key;
      
      if(jsonRespostaCTI.itens[i].key == 9) opt.setAttribute("selected", "");

      // add opt to end of select box (sel)
      sel.appendChild(opt);
   }
   ordenarTpNac();
}

function ordenarTpNac() {
   var itensOrdenados = $('#comboTipoId option').sort(function (a, b) {
      return a.text < b.text ? -1 : 1;
   });

   $('#comboTipoId').html(itensOrdenados);
}
preencherCampos()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
   <li>
      <div>
         <label>Tipo de Nacionalidade</label>
         <select id="comboTipoId" style="max-width: 350px; width: 350px; background-color: #eee; overflow: hidden; max-height: 37px; height: 37px">

         </select>
      </div>
   </li>
</ul>

10
  • então, cara, o problema dessa solução é que, depois que acaba o for da função preencherCampos(), a função ordenarTpNac() executada em seguida "bagunça" a escolha do default. Eu vi que no seu exemplo, você chamou a função preencherCampos() embaixo da ordenarTpNac() e, por algum motivo que eu não entendi, funcionou no seu exemplo, mas comigo, a página quebrou porque ficou em laço infinito. Não tem como eu escolher o default dentro da função de ordenação (que é executada "por último")?
    – Renan
    27/11/2019 às 13:41
  • 1
    Veja, o fato de fazer uma ordenação não muda o option que está selecionado, ele vai continuar selecionado.
    – Meu ovo
    27/11/2019 às 20:30
  • Você está certo, cara, é que eu estava tentando implementar essa mesma alteração numa outra combobox e não deu certo. Acho que é porque o JSON é diferente, e aí, eu tenho que alterar algo na lógica; você pode me ajudar a enxergar o que é?
    – Renan
    28/11/2019 às 13:34
  • 1
    Acho que seria melhor, após popular o select, fazer: $("#comboTipoId option[value='9']").attr("selected", "");
    – Meu ovo
    28/11/2019 às 15:13
  • 1
    puxa, cara, assim funcionou, joguei esse trecho de código na função que ordena, logo após ela terminar de ordenar e funcionou!!! :) brigadão!
    – Renan
    28/11/2019 às 15:25

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 .