如何使用3选择列表创建筛选选择列表

Question

我需要创建一个多过滤器，但是我对JS不好。我有一个课程的SELECT OPTION，其值的格式为3101201，这是我要过滤的ID。

第一个是区域 接下来的3个城市 最后3个进入该国。

上方，我有3个框用于过滤此数据。

var country = document.querySelector("#filtercountry")
var city = document.querySelector("#filtercity")
var region = document.querySelector("#filterregion")

country.addEventListener("change", function() {

  var co = document.querySelectorAll(".selectcountry")
  var ci = document.querySelectorAll(".selectcity")
  var re = document.querySelectorAll(".selectregion")

  if (this.value.length > 0) {

    for (var i = 0; i < country.length; i++) {
      var data = country[i];

      var n = data.querySelector(".selectcourse"); //3 101 201
      var n = "3101201";
      var countryID = n.substring(4, 7);
      var cityID = n.substring(1, 4);
      var regionID = n.substring(0, 1);

      console.log(countryID);
      console.log(cityID);
      console.log(regionID);

      console.log(countryID);
      console.log(cityID);
      console.log(regionID);

      if (this.value == countryID) {
        data.classList.remove("hide")
      } else {
        data.classList.add("hide")
      }
    }
  }
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-4">
          <div class="form-group">
            <select class="form-control custom-select" id="filtercountry">
              <option value="0" class="selectcountry">Country</option>
              <option value="201" class="selectcountry">Australia</option>
              <option value="202" class="selectcountry">Canada</option>
              <option value="203" class="selectcountry">Chile</option>
              <option value="204" class="selectcountry">France</option>
              <option value="205" class="selectcountry">Ireland</option>
              <option value="206" class="selectcountry">Italy</option>
              <option value="207" class="selectcountry">Malta</option>
              <option value="208" class="selectcountry">Mexico</option>
              <option value="209" class="selectcountry">New Zealand</option>
              <option value="210" class="selectcountry">Spain</option>
              <option value="211" class="selectcountry">United Kingdom</option>
              <option value="212" class="selectcountry">United States</option>
            </select>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <select class="form-control custom-select" id="filtercity">
              <option value="0" class="selectcity">City</option>
              <option value="101" class="selectcity">California</option>
              <option value="102" class="selectcity">New York</option>
              <option value="103" class="selectcity">Seattle</option>
              <option value="104" class="selectcity">Boston</option>
            </select>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <select class="form-control custom-select" id="filterregion">
              <option value="0" class="selectregion">Region</option>
              <option value="3" class="selectregion">Brazil</option>
              <option value="1" class="selectregion">Latin America</option>
              <option value="2" class="selectregion">Asia</option>
              <option value="4" class="selectregion">Europa</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label class="control-label">Course</label>
        <select required>
          <option value="3101201">BRAZIL / CURSO 1 / California</option>
          <option value="3102201">BRAZIL / CURSO 2 / New York</option>
          <option value="1103202">Latin / CURSO 3 / Seattle</option>
          <option value="1102202">Latin / CURSO 4 / New York</option>
          <option value="2101203">Asia / CURSO 5 / California</option>
          <option value="2104204">Asia / CURSO 6 / Boston</option>
          <option value="4104205">Europa / CURSO 7 / Boston</option>
          <option value="4102206">Europa / CURSO 8 / New York</option>
        </select>
      </div>
    </div>
  </div>
</div>