Populate select from Ajax

Question

I need to populate a select on the basis of a previously fetched autocomplete data. So I have these 2 HTML fields:

<div id="ind_ritiro" style="display:none">
                             <legend>Indirizzo ritiro</legend>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Ragione sociale</label>
                                    <input type="text" class="form-control" id="rs_triangolazione"
                                           name="rs_triangolazione" value="" placeholder="Digita ragione sociale">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Indirizzo</label>
                                    <select id="add_triangolazione" name="add_triangolazione" class="form-control">
                                      <option value=""></option>     
                                    </select>
                                </div>



   <script type="text/javascript"> 
 $(document).ready(function () {
  var source = document.getElementById("rs_triangolazione").value;
  $("#rs_triangolazione").autocomplete({
    minLength:3,
    autoFocus: true,
    source: '{{URL('triangolazione')}}',
    select: function( event, ui ) {
        $("#rs_triangolazione").val(ui.item.id);
        $("#rs_triangolazione").val(ui.item.label);

    },

});
});

</script>
<script type="text/javascript">
    $(document).ready(function() {
    $("#add_triangolazione").change(function(){
        $.ajax({
            type: 'POST',
            url: 'indirizzi-triangolazione',
            data:  {azienda:$('#rs_triangolazione').val()},
            success: function (response) {
            document.getElementById("new_select").innerHTML=response; 
                }
        });
    });
});
</script>

the 2 snippets fetch as well all the data I need. But now I need to set data fetched into the select... I suppose I need a .each function, but i'm unable to pass...

Answer 1

Create your new select and then push your data onto it with an $.each()

$('#ind_ritiro').append('<select id="new_select"></select>');

$.each(response,function(index){
    $('#new_select').append('<option>',{
        value: response[index].valueYouWant,
        text: response[index].valueYouWant
    });
});