How to append values inside dropdownbox

Question

How do i append values inside dropdownbox using jquery?

here is my html

<div class="input-field col s6">
    <select id="graph_program" class="Programs">  
    </select> 
    <label>Program</label>
</div>

here is my script

$('#graph_college').on('change',function(){
        var college = $('#graph_college option:selected').text();
        $.ajax({
            type:"POST",
            url:"<?php echo base_url('administrator/getCourses')?>",
            data:{college:college},
            dataType:'json',
            success : function(data){
                console.log(data);
                $(data).each(function(){
                    $('.Programs').append($('<option class="black-text"></option>').text(this.course_abbv));
                });
            }
        });
    });

and here is the result: (items are on the bottom side of the dropdown box)

Answer 1

ent$('#graph_college').on('change',function(){
    var college = $('#graph_college option:selected').text();
    $.ajax({
        type:"POST",
        url:"<?php echo base_url('administrator/getCourses')?>",
        data:{college:college},
        dataType:'json',
        success : function(data){
            console.log(data);
            $(data).each(function(){
                $('.Programs').append($('<option class="black-text"></option>').text(this.course_abbv));
            });
           $('select').material_select(); // answer
        }
    });
});

i needed to reinitialize the dropdownbox of materialize