Как изменять (фильтровать) второй/третий список в зависимости от выбора в первом/втором?

Question

[Алексей]

Нашел вот такой код, но нужно чтобы можно было выбирать не последовательно, а напрямую.
Есть варианты с таблицей, но не подходят - разное количество строк 10 в первом списке (столбце), 2 - 100, в 3 - 1000.

А как сделать чтобы все списки изначально были видны (с полосой прокрутки) и можно было обращаться напрямую - сразу нажимаешь, например московская область и отфильтровывается третий список или нажимаешь Россия и отфильтровываются все области и города из России, которые доступны для прямого обращения. Соответственно во всех списках есть опция "ВСЕ" при выборе которой в зависимых списках отображаются все элементы. Из примера выше при выборе "ВСЕ" из областей отображаются все города но для выбранной страны (если была выбрана!) А при выборе "ВСЕ" из стран отображаются и все области и все города.
Выбланное значение из 3го списка будет отправляться в форму
Спасибо

Страна:
<select id="country_id" class="StyleSelectBox">
  <option value="0">- выберите страну -</option>
  <option value="1">Россия</option>
  <option value="2">Украина</option>
  <option value="3">Белорусь</option>
</select>
Регион: 
<select id="region_id" disabled>
  <option value="0">- Выберите регион -</option>
</select>
Город: 
<select id="city_id" disabled>
  <option value="0">- Выберите город -</option>
</select>
<script>
    var all_regions=[];
    var all_cites=[[],[],[]];

    all_regions[0]=["московская обл","ростовская обл","саратовская обл"];
    all_regions[1]=["киевская обл","львовская обл","харьковская обл"];
    all_regions[2]=["минская обл","брестская обл","гроднинская обл"];

    all_cites[0][0]=["Москва","Химки","Калуга"];
    all_cites[0][1]=["Такой-то город","Такой-то город","Калуга"];
    all_cites[0][2]=["Такой-то город","Такой-то город","Такой-то город"];

    all_cites[1][0]=["Киев","Жмеринка","Бердычев"];
    all_cites[1][1]=["Львов","Сокаль","Стрый"];
    all_cites[1][2]=["Харьков","Полтава","Пирятин"];

    all_cites[2][0]=["Минск","Такой-то город","Такой-то город"];
    all_cites[2][1]=["Брест","Такой-то город","Такой-то город"];
    all_cites[2][2]=["Гродно","Такой-то город","Вильно"];

    country_id.onchange = function() {
        region_id.disabled = false;
        region_id.innerHTML = "<option value='0'>- Выберите регион -</option>";
        myregion = this.value - 1;
        if (myregion != -1) {
            for (var i = 0; i < all_regions[myregion].length; i++) {
                region_id.innerHTML += '<option value="' + (i+1) + '">' + all_regions[myregion][i] + '</option>';
            }
        } else {
            region_id.disabled = true;
            city_id.disabled = true;
        }
    }

    region_id.onchange = function() {
        city_id.disabled = false;
        city_id.innerHTML = "<option value='0'>- Выберите город -</option>";
        var mycite = this.value - 1;
        if (mycite != -1) {
             for (var i = 0; i < all_cites[myregion][mycite].length; i++){
                 city_id.innerHTML += '<option value="' + (i + 1) + '">' + all_cites[myregion][mycite][i] + '</option>';
             }
        } else {
            city_id.disabled = true;
        }
    }
</script>

https://jsfiddle.net/kLxp0m24/