Materialize select not working append option with

Question

I use materialize css for my project, i have problem when i want to append option in matrialize select with ajax. I\'ve following this answer How to dynamically modify <

Answer 1

 $(document).ready(function() {
    $('select').material_select();
 });
 
 $(document).on('change','#select_1', function(){
     get_selected();         
})


function get_selected(){
     var data=[{id:1,name:"ABC"},{id:2,name:"XYZ"},{id:3,name:"PQR"}];
     
     var Options="";
    $.each(data, function(i, val){ 
      Options=Options+"<option value='"+val.id+"'>"+val.name+"</option>";
  });
  $('#select_2').empty();
  $('#select_2').append(Options);
  $("#select_2").material_select()
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">


  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    
<div class="row">    
<div class="input-field col s12">                            
<select id="select_1" name="select_1">
<option value="1">option 1</option>
<option value="2">option 2Barat</option>     
</select>
<label for="select_1">Select 1</label>
</div>
                    
<div class="input-field col s12">                          
<select id="select_2"  name="select_2">
<option value="0" disabled="disabled">Choose option</option>
</select>
<label for="select_2">Select 2</label>
</div>
</div>

Answer 2

For anyone coming here after 2019, please note that, the API has changed and material_Select() no longer works. Use,

    $('#my_Element').append(<Array of options>)
    $('#my_Element').formSelect()