javaweb表单多选按钮生成徽章

在表格中已bootstrap中徽章的形式显示多选按钮

表单部分：

<form><input type="hidden" name="type" id="type" value="add"><div class="form-group"><label for="">编号</label> <input type="text" class="form-control"id="id" name="id" required placeholder=""></div><div class="form-group"><label for="">姓名</label> <input type="text" class="form-control"name="username" id="username" required placeholder=""></div><div class="form-group  "><label for="">部门</label><select class="dept form-control" id="dept" name="dept"></select></div><div class="form-group"><label for="">性别</label><div id="sex" class="sex col"></div></div><div class="form-group">label for="">入职日期</label> <input type="date" class="form-control" id="startdate" name="startdate"></div><div class="form-group"><label for="">专业技能</label><div id="skill" class="skill form-check"></div></div><button type="button" id="save" class="btn btn-block btn-success">保存</button>
</form>

js部分：

function loadData(){$.get('person',{type:'list'},(data)=>{let tr='';$.each(data,(i,item)=>{let dname='不详';if(item.dept.dept_name!=null){dname=item.dept.dept_name;}//多选框的字段let span='';$.each(item.skill,(i,items)=>{span+=`<span class="badge badge-primary">${items.skill_name}</span>`})tr+=`<tr><td>${item.id}</td><td>${item.username}</td><td>${dname}</td><td>${item.sex.sex_name}</td><td>${item.startdate}</td><td>${span}</td><td><button type="button" class="update btn btn-primary" data-toggle="modal" data-target="#exampleModal" value=${item.id}>修改</button><button type="button" class="del btn btn-danger" value="${item.id}">删除</button></td></tr>`$('tbody').html(tr);})},'json')
}

效果图：