《bootstrap多选、bootstrap多选输入自定义标签》
一、解决方案简述
在使用Bootstrap实现多选功能并允许用户输入自定义标签时，可以借助一些额外的插件或者通过修改原生的Bootstrap元素样式与交互逻辑来达成。比如使用Select2插件，它能很好地与Bootstrap融合，在提供多选功能的方便地支持用户输入新的选项作为自定义标签。
二、基于Select2插件的实现
1. 引入资源
需要引入Select2的CSS和JS文件，以及Bootstrap相关资源。
```html
</p>
<h3>2. HTML结构</h3>
<p>创建一个多选的元素。
```html</p>
One
Two
Three
<p>3. 初始化Select2
javascript
$(document).ready(function() {
$('.js - example - basic - multiple').select2({
tags: true // 允许用户输入自定义标签
});
});
这样就实现了基本的多选并且可以输入自定义标签的功能。
三、纯Bootstrap方式（思路）
虽然比较麻烦，但也可以尝试只用Bootstrap构建。我们可以利用Bootstrap的按钮组和输入框组合的方式。
1. 创建按钮组和输入框
html</p>
<div class="input - group mb - 3">
<div class="input - group - prepend">
<button type="button" class="btn btn - outline - secondary js - add - tag">添加</button>
</div>
</div>
<div class="btn - group - toggle" id="tag - list">
<!-- 已选中的标签会以按钮形式显示在这里 -->
</div>
<p>2. JavaScript逻辑（部分）
``javascript`);
let selectedTags = [];
$('.js - add - tag').click(function(){
let newTag = $('.js - tag - input').val();
if(newTag){
selectedTags.push(newTag);
$('#tag - list').append(
$('.js - tag - input').val('');
}
});
$('#tag - list').on('click','.js - remove - tag',function(){
let tagToRemove = $(this).data('tag');
selectedTags = selectedTags.filter(tag => tag !== tagToRemove);
$(this).parent().remove();
});
```
以上两种思路都可以满足不同的需求场景，Select2插件方式更加便捷，而纯Bootstrap方式则更灵活，可以根据自己的项目情况选择合适的方法。
