Materialize select how to recreate?

Question

I came across with this issue during my work process and couldn't find any logical solution.

Firstly, I have two dropdown menus. One for countries, other for cities. As Materialize converts select element into ul, thus I have two ul-s instead.

<select name="res_country" id="res_country">
   <option selected="" disabled="">Ölkə</option>
       <?php
            foreach ($countries as  $country) {
                 print "<option  value='".$country['id']."'> ".$country["text"]."</option>";
            }
       ?>
</select>  
<select name="res_city" id="res_city">
   <option selected="" disabled="">Şəhər</option>
   <?php 
       foreach ($cities as  $city) {
          print "<option parent=".$city['country_id']." value=".$city['id'].">".$city['text']."</option>" ;
       }                                        
  ?>
</select>    

I wanted to dynamically set options of second dropdown according to which country I selected in the first one.

Yes, I have already read about that I should firstly destroy and then create dropdowns after modifiying them. But this didn't work.

I fixed this problem by writing below code in JS. $('#res_country') stands for first dropdown with countries, $('#res_city') for the second with cities.

$('#res_country').on('change',function () {       
    var country_id = $('#res_country option:selected').val();      
    var indexes =  [];
    // 
    $('#res_city option').each(function()
    {
        if($(this).attr('parent') == country_id){
            var val = $('#res_city option').index($(this));
            indexes.push(val);
        }
    });
    console.log(indexes); 
    $('#res_city').prev().children().hide();
    for(var i=0; i<indexes.length; i++){
        $('#res_city').prev().children().eq(indexes[i]).show();
    }            
});

But I am not satisfied with such solution. I wonder if any of you had similar situation?