How do I leave an option like "default" on a combobox?

Question

I have a combobox with several "values". I will "fail" values, just for example. 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 that fills this combo (call this Function in the "onload" page):

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 to sort combo alphabetically:

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

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

The problem is that, after sorting, the "default" value that appears to the user is "VISA OF PERMANENCE - PF" (the last value). I wanted it to be "default" to "PARENTS OF BIRTH - PF" (key "9"). How to do this? I tried to put something like if(opt.value == "9") { opt.setected = "Selected"; } inside the function’s end fill fields() but it didn’t work...

Answer 1

Before making the append of options, put a if to insert the attribute selected option whose value is 9:

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

Will result in HTML:

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

Behold:

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>