Select with Jquery

Question

Personal I have a json return by Jquery and wanted to load the content in a field select my javascript this way:

$.ajax({
            type : 'POST',
            url  : 'Acoes.php',
            data: {'ACAO' : 'BUSCA_SETOR' },
            dataType: 'json',
            success :  function(response){

            for(var i=0; response.length>i; i++){
                $('#val_setor').append('<option value="'+response[i].SETOR+'">'+response[i].SETOR+'</option>');

            }


        },error: function(result) {
            alert("Data not found");
        }
}); 

I tried to $('#val_setor').append but it didn’t work.

My select field is like this:

<select id="val_setor" name="val_setor" class="select-chosen" data-placeholder="ESCOLHA UM SETOR" style="width: 590px;">
                <option value="">ESCOLHA UM SETOR</option>
                <option value=""></option>
            </select>

How is the correct way to fill in?

Answer 1

This should work:

$.ajax({
  type: 'POST',
  url: 'Acoes.php',
  data: {
    'ACAO': 'BUSCA_SETOR'
  },
  dataType: 'json',
  success: function (response) {
    const valSetor = document.getElementById('val_setor')

    for (let i = 0; i < response.length; i++) {
      const option = document.createElement('option')
      option.value = response[i].SETOR
      option.text = response[i].SETOR

      valSetor.appendChild(option)
    }
  },
  error: function () {
    alert('Data not found')
  }
})