javascript - 过滤后下拉 DOM 不更新

Question

我正在尝试使用 javascript 和 jQuery 在选择 checkbox 时过滤 dropdown 菜单中的选项> 但它似乎不起作用。它要么隐藏过滤器应用的所有内容，即使在发生变化时也是如此。

下拉列表是使用相同的 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);
        }
    })

在控制台记录我的select时，选项确实显示正确，但 DOM 没有更新。

Answer 1

修改底层 select 后，调用 bootstrap-select refresh 以使其反射(reflect)方法末尾的更改:

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);
        $(select).selectpicker('refresh');
    })
}

let jobStatusCheck = "Active";

fillJobs(jobStatusCheck);

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

$(function() {
  $('#candidateAssociatedJobs').selectpicker();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<select id="candidateAssociatedJobs"></select>

<label>
  <input type="checkbox" id="activeJobsCheck">
  Show all jobs
</label>