尾部 Select 使用复选框

Question

我想使用复选框而不是下拉菜单执行多个尾部 select，我检查了一个代码，但我无法将其转换为复选框，谁能帮助我。

 var projects = tail.select("select.projects", { deselect: true, multiContainer: ".projects-selected", multiple: true, }); projects.config("multiple", false, true); projects.on('change', changeFirst); let tests = tail.select("select.tests", { multiContainer: ".tests-selected", disabled: true }); function getData() { var size = Math.floor(Math.random() * 6) + 5; var randomEntry = function() { var tmp = CryptoJS.MD5(Math.floor(Math.random() * 1000).toString()).toString(); console.log(tmp); return { id: 'ID_' + tmp, name: tmp }; }; return Array.from({ length: size }, randomEntry); } function changeFirst(opt, event) { if (event == 'select') { let data = getData(); let items = {}; data.forEach(function(entry) { items[entry.id] = entry.name }); tests.config('items', items); tests.config('disabled', false); } else if (event == 'unselect') { tests.config('disabled', true); tests.config('items', {}); } }

 <div class="left"> <select class="projects"> <option>Project 1</option> <option>Project 2</option> </select> </div> <div class="right"> <span class="projects-selected"></span> <span class="tests-selected"></span> </div>

我尝试编辑此代码，但没有得到我想要的，所以任何人都可以帮我解决它。

Output 应该是这样的：

所以当我们点击生成的跨度时，它应该取消选择。 ，但是任何尝试提供复选框都不起作用

笔记：

尾巴。 select 是 jQuery 尾部的重写版本。 select 插件，可用于美化和增强默认 select 框，无依赖

https://www.cssscript.com/single-multiple-select-tail/#:~:text=Description%3A,select%20box%20with%20no%20dependency。

我不知道这是否可以使用tail.select 来完成，如果不可能，任何人都可以建议任何其他方式来做到这一点。