JSFiddle - React, Tailwind, and code Playground

HTML

<select id="list1">
    <option value="">Веберете тип фрукта</option>
    <option value="1">бананы</option>
    <option value="2">кокосы</option>
    <option value="3">киви</option>
</select>
<br /><br />
<select id="list2">
    <option value="">Веберете фрукт</option>
</select>

JavaScript

var list = { 
    1 : ['банан1', 'банан2', 'банан3'],
    2 : ['кокос1', 'кокос2', 'кокос3'],
    3 : ['киви1', 'киви2', 'киви3']
}
var list1 = document.getElementById('list1');
var list2 = document.getElementById('list2');
var defopt = document.createElement('option');
defopt.innerHTML = 'Веберете фрукт';

list1.onchange = function() { 
    list2.innerHTML = '';
    list2.appendChild(defopt);
    if(val = this.value ) {
        for(var i=0,len = list[val].length; i < len; i++)     {
            var option = document.createElement('option');           
            option.innerHTML = list[val][i];
            option.value = i+ 1;
            list2.appendChild(option);
        }
    }
}