Измените параметры в раскрывающемся списке в зависимости от выбранного параметра в другом раскрывающемся списке: (не удается применить это в формах)

Question

На самом деле я создаю регистрационную форму, в которой есть два списка (выберите теги) внутри строки формы> div формы группы, и я хочу, чтобы каждый раз, когда я выбирал какой-либо элемент из первого списка, соответствующий этому выбранному элемент Я хочу отобразить список элементов во втором теге выбора, но во втором списке ничего не отображается: - Я ссылался на эту ссылку, чтобы сделать это

Вот мой код: HTML :

 <div class="form-row">
                        <div class="form-group">


                            <div class="select-list" style="display: inline-block;">
                                <label for="category">Types of Events</label>
                                <select class="form-control" name="eventsCategory" id="category" onchange="ChangeEventsList();">
                                    <option value="" disabled selected>select your
                                        category</option>
                                    <option value="SD">Specific Date</option>
                                    <option value="OG">Ongoing</option>
                                </select>
                            </div>


                        </div>
                        <div class="form-group">
                            <div class="inner-event" style="display: inline-block;">
                                <select class="form-control" name="innerevents" id="categoryinner"></select>
                            </div>
                        </div>
                        </div>

и JavaScript код для этого:

   var eventsAndModels = {};
        eventsAndModels['SD'] = ['V70', 'XC60', 'XC90'];
        eventsAndModels['OG'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];

function ChangeEventsList() {
  var eventsList = document.getElementById("category");
  var modelList = document.getElementById("categoryinner");
  var selEvent = eventsList.options[eventsList.selectedIndex].value;
  while (modelList.options.length) {
    modelList.remove(0);
  }
  var events = eventsAndModels[selEvent];
  console.log("Events: "+ events);
  if (events) {
    var i;
    for (i = 0; i < events.length; i++) {
      var event = new Option(events[i], i);
      modelList.options.add(event);
    }
  }
}

На самом деле я получил эту ошибку во время console.log ("Events:" + events); :

GET http://127.0.0.1:5500/fonts/montserrat/Montserrat-Bold.ttf net::ERR_ABORTED 404 (Not Found)
setCards.js:2 document is ready
reactTraverser.js:6 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at reactTraverser.js:6
(anonymous) @ reactTraverser.js:6

Чтобы решить эту проблему, я нашел это:

Но не знаю, как применить это в моем случае. Любая помощь, где я был не прав? Заранее спасибо.