1 <div class="layui-btn-container tag" lay-filter="tags">
2 <script type="text/html" template lay-url="/admin/exam/getExamReasonList" lay-done="layui.data.done(d);">
4 {{# layui.each(layui.data('reason').reasoncontent,function(index,item){ }}
5 <button lay-id="{{index}}" type="button" class="tag-item">{{item}}</button>
6 {{# }) }}
7 </script>
8 </div>
1 var that = this;
2 var reasonContent = [];
3 layui.use(['tag'], function () {
4 var tag = layui.tag;
5 tag.render("tags");
6 tag.on('click(tags)', function (data) {
7 var b = data.elem.context.attributes[2].value;
8 var a = b.indexOf('layui-btn-primary');
9 var rContent = this.innerText;
8 if (a != -1) {
9 //选中
10 data.elem.context.classList.remove("layui-btn-primary");
11 if (rContent == '其他原因') {
12 that.otherReason(a);
13 } else {
14 reasonContent.push(rContent);
15 }
16 } else {
17 //不选中
18 data.elem.context.classList.add("layui-btn-primary");
19 reasonContent.remove(rContent);
20 if (rContent == '其他原因') {
21 that.otherReason(a);
22 }
23 }
24 )}
1 //其他原因
2 var otherReason = function (data) {
3 if (data != -1) {
4 //选中
5 let newItem = document.createElement('input');
6 newItem.className = 'layui-input';
7 newItem.id = 'otherInput';
8 newItem.name = 'otherInput';
9 newItem.setAttribute("placeholder", "请输入其他原因");
10 newItem.setAttribute("lay-verify", "required");
11 // newItem.innerHTML = html;
12 $('#content').append(newItem);
13 } else {
14 //不选中
15 $('#otherInput').remove();
16 }
17 };
![](https://img2020.cnblogs.com/blog/1955835/202009/1955835-20200929115921894-1315737919.png)