I stumbled upon the bsmultiselect library for a project. The interface looks good but seems like the documentation needs some more work, hence i cannot figure out how to return the list of items selected by the user. I'd appreciate it if someone could give me a hint at least.

here's my code for now:

const instSel = document.getElementById('instrument-select');

let x = new xhr();

x.get("GET", "instruments.json", (rsp) => {
    instr = JSON.parse(rsp)
    for (i in instr) {
        let optGr = document.createElement("optgroup");
        optGr.setAttribute("label", instr[i]["name"]);
        for (x in instr[i]["instruments"]) {
            let opt = document.createElement("option");
            opt.setAttribute('value', instr[i]["instruments"][x]);
            opt.setAttribute('class', 'dropdown-item');
            opt.textContent = instr[i]["instruments"][x];
            optGr.appendChild(opt);
        }
    instSel.appendChild(optGr);
    console.log(optGr);
    }
    bs = dashboardcode.BsMultiSelect("#instrument-select");
    console.log(bs);
});

document.body.addEventListener('dblclick', () => {
    console.log(bs.getPicks()); // this returns the html only
});

Thanks in advance for any help!

Update

Managed to collect the data by using the e.target event.

instSel.onchange = (e) => {
    // loop through all the items
    for (let i = 0; i < e.target.length; i++;) {
        if (e.target[i].selected) { // if the item is selected
            console.log(e.target[i].textContent)
        }
    }
}