JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<script src="http://www.tigir.com/js/linkedselect.js"></script>
 
<!-- динамический список -->
<select size="1" id="List_country" class="menu" name="country">
<option value='1'selected > Россия </option>
<option value='2'> Украина </option>
<option value='3'> Беларусь </option>
<option value='5'> Литва </option>
<option value='6'> Латвия </option>
<option value='7'> Молдова </option>
</select>
          
<!-- Подчиненный список 1 (изначально пуст) -->
 <select id="List_city" class="menu" name="city"></select>

JavaScript

var syncList_cc = new syncList;
var SelCity = document.getElementById("List_city");
 
// Определяем значения подчиненного списка
syncList_cc.dataList = {
 
/* Определяем элементы второго списка в зависимости 
от выбранного значения в первом списке */
        
'1' : {'1':'Москва','2':'Нижний Новгород','3':'Санкт-Петербург','4':'Самара','5':'Краснодар'} 
,'2' : {'1':'Киев','2':'Днепропетровск','3':'Донецк'} 
,'3' : {'1':'Минск'} 
,'5' : {'1':'Вильнюс'} 
,'6' : {'1':'Рига'} 
,'7' : {'1':'Кишинёв'} 
        };
 
// Включаем синхронизацию связанных списков
syncList_cc.sync("List_country","List_city");
setTimeout(function(){SelCity.selectedIndex = 3;}, 1);