Javascript 带VanillaJS的动态下拉菜单

因为在Bootstrap5中不再需要JQuery，所以我想用VanillaJS替换我的动态下拉列表

document.addEventListener('DOMContentLoaded', function () {

const optgroups1 = document.getElementById('pos_select').getElementsByTagName('optgroup');
  let sel = document.getElementById('candidate_functionalarea_id');
  sel.addEventListener("change", function () {
    let evnt = document.getElementById("candidate_functionalarea_id");
    let options = dyndrop(optgroups1, evnt);
    document.getElementById('candidate_positioncategory_id').innerHTML = options;
  });

  const optgroups2 = document.getElementById('tag_select').getElementsByTagName('optgroup');
  let sel2 = document.getElementById('candidate_function_id');
  sel2.addEventListener("change", function () {
    let evnt2 = document.getElementById("candidate_functionalarea_id");
    let options = dyndrop(optgroups2, evnt2);
    document.getElementById('candidate_positioncategory_id').innerHTML = options;
  });

  function dyndrop(optgroups, evnt) {
    let option_text = evnt.options[evnt.selectedIndex].text;
    let option_id = evnt.options[evnt.selectedIndex].value;
    let options;
    for (let i = 0; i < optgroups.length; i++) {
      if (optgroups[i].label == option_text) {
        options = optgroups[i].innerHTML;
      }
    }
    return options;
  };
});

document.addEventListener（'DOMContentLoaded'，函数（）{
const optgroups1=document.getElementById（'pos_select'）.getElementsByTagName（'optgroups'）；
设sel=document.getElementById（'candidate_functionalarea_id'）；
sel.addEventListener（“更改”，函数（）{
让evnt=document.getElementById（“候选函数区域id”）；
let options=dyndrop（optgroups1，evnt）；
document.getElementById（'candidate\u positioncategory\u id'）。innerHTML=options；
});
const optgroups2=document.getElementById（'tag_select'）.getElementsByTagName（'optgroups'）；
设sel2=document.getElementById（'candidate_function_id'）；
sel2.addEventListener（“更改”，函数（）{
让evnt2=document.getElementById（“候选函数区域id”）；
let options=dyndrop（optgroups2，evnt2）；
document.getElementById（'candidate\u positioncategory\u id'）。innerHTML=options；
});
函数dyndrop（optgroups，evnt）{
让option_text=evnt.options[evnt.selectedIndex].text；
让option\u id=evnt.options[evnt.selectedIndex].value；
让选择；
for（设i=0；i

当我在console.log中查看optgroup1和optgroup2的内容时，我看到这两个变量仍然正确地填入了第一个候选函数ea_id（HTMLCollection{0:optgroup，1:optgroup，2:optgroup，length:3}）。一切运转正常。但是，一旦我随后选择了另一个候选函数ea\u id，optgroup1和optgroup2中就不再有属性（内容：HTMLCollection{length:0}）

如果有一种方法无法更改optgroup1和optgroup2，那么我就解决了这个问题