Materialize select how to recreate? - input

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?