Option group does not work with a function

Question

I have an option group. When you select an option, a filter function should be called and output accordingly. Only with select it works. So it must be the option group. The individual options are loaded with the function. This works perfectly. Here is the code:

<label for="slc">Select a Filter:</label>
<select class="selectpicker" id="slcfilter">
    <optgroup 
        label="Period" 
        class="form-control" 
        id="filterPeriod" 
        onchange="filter2var(periods, this)">
    </optgroup>
    <optgroup 
        label="Language" 
        class="form-control" 
        id="filterLanguage" 
        onchange="filter3var(languages, 'language', this)">
    </optgroup>
</select>

And here arte the funktions. I have two filter functions and two functions which are for the options:

function resetDropdown(exclude) {
  dropdown_ids = ['filterPeriod', 'filterLanguage', 'filterGenre', 'filterSubgenre', 'filterMaterial', 'filterProvenience']
  for(const elem of dropdown_ids) {
    if(elem != exclude) {
      var dropdown = document.getElementById(elem)
      dropdown.value = ""
    } 
  }
}

function filter2var(toBeFiltered, selected) {
  resetDropdown(selected.id)
  const keys = Object.keys(toBeFiltered);
  var value = selected.value
  var $select = $(document.getElementById('images')).selectize(options);
  var selectize = $select[0].selectize;
  selectize.clearOptions(true)
  for(const obj of keys) {
    if(toBeFiltered[obj] == value) {
      selectize.addOption({value: obj, text: obj});
      selectize.refreshOptions();
    }
  }
  document.getElementById('images').innerHTML = options
}

function filter3var(toBeFiltered, entry, selected) {
  resetDropdown(selected.id)
  const keys = Object.keys(toBeFiltered);
  var value = selected.value
  var $select = $(document.getElementById('images')).selectize(options);
  var selectize = $select[0].selectize;
  selectize.clearOptions(true)
  for(const obj of keys) {
    if(toBeFiltered[obj][entry] == value) {
      selectize.addOption({value: obj, text: obj});
      selectize.refreshOptions();
    }
  }
  document.getElementById('images').innerHTML = options
}

function setUniqueEntriesAsOptions1(select_id, object) {
  var select = document.getElementById(select_id)
  var unique = []
  var options = "<option value=\"\">--Please choose an option--</option>"
  const keys = Object.keys(object);
  for(const obj of keys) {
    if(!unique.includes(object[obj]) && object[obj] != "") {
      unique.push(object[obj])
      options+= "<option value=\""+object[obj]+"\">"+object[obj]+"</option>"
    }
  }
  select.innerHTML = options
}

function setUniqueEntriesAsOptions(select_id, object, uniqueEntry) {
  var select = document.getElementById(select_id)
  var unique = []
  var options = "<option value=\"\">--Please choose an option--</option>"
  const keys = Object.keys(object);
  for(const obj of keys) {
    if(!unique.includes(object[obj][uniqueEntry]) && object[obj][uniqueEntry] != "") {
      unique.push(object[obj][uniqueEntry])
      options+= "<option value=\""+object[obj][uniqueEntry]+"\">"+object[obj][uniqueEntry]+"</option>"
    }
  }
  select.innerHTML = options
}

setUniqueEntriesAsOptions1('filterPeriod', periods)
setUniqueEntriesAsOptions('filterLanguage', languages, 'language')
setUniqueEntriesAsOptions('filterGenre', languages, 'genre')
setUniqueEntriesAsOptions('filterSubgenre', languages, 'subgenre')
setUniqueEntriesAsOptions('filterMaterial', languages, 'material')
setUniqueEntriesAsOptions('filterProvenience', languages, 'provenience')