Javascript 筛选后未更新下拉列表DOM

我正在尝试使用

javascript

和

jQuery

在选中的

复选框上过滤
下拉菜单中的选项，但似乎不起作用。它或者隐藏过滤器应用的所有内容，即使在更改时也是如此

下拉列表通过使用相同javascript本身的数组填充

    function fillJobs(jobStatus){
        var select = document.getElementById("candidateAssociatedJobs");
        select.innerHTML = '';
        let companies = {
"A":[
    {"jobid":"1","company":"A","role":"A Role 1","status":"Closed"},
    {"jobid":"2","company":"A","role":"A Role 2","status":"Active"},
    {"jobid":"3","company":"A","role":"A Role 3","status":"Active"}
],
"B":[
    {"jobid":"4","company":"B","role":"B Role 1","status":"Closed"},
    {"jobid":"5","company":"B","role":"B Role 2","status":"Closed"},
    {"jobid":"6","company":"B","role":"B Role 3","status":"Active"}
]}

        Object.keys(companies).forEach(company => {

            let optGroup = document.createElement("optgroup");
            optGroup.label = company;

            companies[company].forEach(job => {

                if(jobStatus === "Active"){
                    if(job.status === "Active"){
                        let opt = job;
                        let el = document.createElement("option");
                        el.textContent = opt.role;
                        el.setAttribute('data-tokens', company);
                        el.value = opt.jobid;
                        optGroup.appendChild(el);
                    }
                }
                else
                {
                    let opt = job;
                    let el = document.createElement("option");
                    el.textContent = opt.role;
                    el.setAttribute('data-tokens', company);
                    el.value = opt.jobid;
                    optGroup.appendChild(el);
                }

            })

            select.append(optGroup);
            console.log(select);

        })

    }

    let jobStatusCheck = "Active";

    fillJobs(jobStatusCheck);

    $('#activeJobsCheck').change(e =>{
        e.preventDefault();
        if(jobStatusCheck === "Active"){
            jobStatusCheck = "Closed"
            fillJobs(jobStatusCheck);
        }
        else{
            jobStatusCheck = "Active"
            fillJobs(jobStatusCheck);
        }
    })

在console logging my
select
上，选项确实正确显示，但DOM没有得到更新。
当您修改了基础
select
时，调用引导选择
refresh
，使其反映方法末尾的更改：


函数填充作业（作业状态）{
var select=document.getElementById（“CandidateAsociatedJobs”）；
select.innerHTML=''；
让公司={
“A”：[
{“jobid”：“1”，“公司”：“A”，“角色”：“A角色1”，“状态”：“已关闭”}，
{“jobid”：“2”，“公司”：“A”，“角色”：“A角色2”，“状态”：“活动”}，
{“jobid”：“3”，“公司”：“A”，“角色”：“A角色3”，“状态”：“活动”}
],
“B”：[
{“jobid”：“4”，“公司”：“B”，“角色”：“B角色1”，“状态”：“关闭”}，
{“jobid”：“5”，“公司”：“B”，“角色”：“B角色2”，“状态”：“关闭”}，
{“jobid”：“6”，“公司”：“B”，“角色”：“B角色3”，“状态”：“活动”}
]
};
Object.key（companys）.forEach（company=>{
让optGroup=document.createElement（“optGroup”）；
optGroup.label=公司；
公司[company].forEach（职务=>{
如果（作业状态==“活动”）{
如果（作业状态==“活动”）{
让opt=job；
设el=document.createElement（“选项”）；
el.textContent=opt.role；
el.setAttribute（“数据令牌”，公司）；
el.value=opt.jobid；
optGroup.appendChild（el）；
}
}
其他的
{
让opt=job；
设el=document.createElement（“选项”）；
el.textContent=opt.role；
el.setAttribute（“数据令牌”，公司）；
el.value=opt.jobid；
optGroup.appendChild（el）；
}
})
select.append（optGroup）；
$（选择）.selectpicker（'refresh'）；
})
}
让jobStatusCheck=“活动”；
填写作业（作业状态检查）；
$（'#activeJobsCheck'）。更改（e=>{
e、 预防默认值（）；
如果（作业状态检查==“活动”）{
jobStatusCheck=“已关闭”
填写作业（作业状态检查）；
}
否则{
jobStatusCheck=“活动”
填写作业（作业状态检查）；
}
});
$（函数（）{
$（'#candidateAssociatedJobs'）。选择选择器（）；
});

显示所有作业
修改基础
选择后，调用引导选择
刷新
，使其反映方法末尾的更改：


函数填充作业（作业状态）{
var select=document.getElementById（“CandidateAsociatedJobs”）；
select.innerHTML=''；
让公司={
“A”：[
{“jobid”：“1”，“公司”：“A”，“角色”：“A角色1”，“状态”：“已关闭”}，
{“jobid”：“2”，“公司”：“A”，“角色”：“A角色2”，“状态”：“活动”}，
{“jobid”：“3”，“公司”：“A”，“角色”：“A角色3”，“状态”：“活动”}
],
“B”：[
{“jobid”：“4”，“公司”：“B”，“角色”：“B角色1”，“状态”：“关闭”}，
{“jobid”：“5”，“公司”：“B”，“角色”：“B角色2”，“状态”：“关闭”}，
{“jobid”：“6”，“公司”：“B”，“角色”：“B角色3”，“状态”：“活动”}
]
};
Object.key（companys）.forEach（company=>{
让optGroup=document.createElement（“optGroup”）；
optGroup.label=公司；
公司[company].forEach（职务=>{
如果（作业状态==“活动”）{
如果（作业状态==“活动”）{
让opt=job；
设el=document.createElement（“选项”）；
el.textContent=opt.role；
el.setAttribute（“数据令牌”，公司）；
el.value=opt.jobid；
optGroup.appendChild（el）；
}
}
其他的
{
让opt=job；
设el=document.createElement（“选项”）；
el.textContent=opt.role；
el.setAttribute（“数据令牌”，公司）；
el.value=opt.jobid；
optGroup.appendChild（el）；
}
})
select.append（optGroup）；
$（选择）.selectpicker（'refresh'）；
})
}
让jobStatusCheck=“活动”；
填写作业（作业状态检查）；
$（'#activeJobsCheck'）。更改（e=>{
e、 预防默认值（）；
如果（作业状态检查==“活动”）{
jobStatusCheck=“已关闭”
填写作业（作业状态检查）；
}
否则{
jobStatusCheck=“活动”
填写作业（作业状态检查）；
}
});
$（函数（）{
$（'#candidateAssociatedJobs'）。选择选择器（）；
});

显示所有作业
如果我试一下，您的代码会正常工作，所以一定是其他代码。你还有其他消息吗？你能提供一个例子吗（）？我已经更新了公司，是的，我正在使用bootstrap select for select:/如果我尝试一下，你的代码会工作，所以它一定是其他东西。你还有其他消息吗？你能提供一个例子吗（）？我已经更新了公司，是的，我正在使用bootstrap select for select:：在这样做时，没有任何选项显示，我应该刷新然后追加吗？刷新和追加也会导致没有选项显示。@Nithin你的代码中可能有其他错误。我已经更新了我的答案，加入了你的代码，它对我有效（Chrome）。谢谢JLe，它有效。原来是异步性质引发了错误，我通过async/await解决了这个问题。也将检查上述解决方案。谢谢。在这样做时，没有任何选项显示，我应该刷新然后追加吗？刷新然后追加