好的，下面是一个基于
Bootstrap 和
Select2 的
表单页面，可以添加多个关键词：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Bootstrap &
Select2
Form Demo</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-
bootstrap/4.6.0/css/
bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/
select2/4.0.13/css/
select2.min.css" rel="stylesheet" />
</head>
<body>
<div class="container mt-3">
<h1>
Bootstrap &
Select2
Form Demo</h1>
<
form>
<div class="
form-group">
<label for="title">标题</label>
<
input type="text" class="
form-control" id="title" name="title" placeholder="请输入标题" required>
</div>
<div class="
form-group">
<label for="keywords">关键词</label>
<
select id="keywords" class="
form-control" multiple="multiple" name="keywords[]"></
select>
</div>
<
button type="
button" class="btn btn-primary" id="add-keyword-btn">添加关键词</
button>
<
button type="submit" class="btn btn-success">提交</
button>
</
form>
</div>
<template id="keyword-template">
<div class="
form-group keyword-group">
<
input type="text" class="
form-control keyword-
input" name="keyword" placeholder="请输入关键词" required>
<
button type="
button" class="btn btn-danger remove-keyword-btn">移除</
button>
</div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-
bootstrap/4.6.0/js/
bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/
select2/4.0.13/js/
select2.min.js"></script>
<script>
$(document).ready(function() {
// 初始化
Select2
$('#keywords').
select2();
// 添加关键词按钮点击事件
$('#add-keyword-btn').click(function() {
// 复制关键词模板并添加到
表单中
var keywordTemplate = $('#keyword-template').html();
$('.
form-group:last').after(keywordTemplate);
// 初始化新添加的关键词输入框和移除按钮
var $newKeywordGroup = $('.keyword-group:last');
$newKeywordGroup.find('.keyword-
input').
select2();
$newKeywordGroup.find('.remove-keyword-btn').click(function() {
$newKeywordGroup.remove();
});
});
});
</script>
</body>
</html>
```
在这个示例中，我们使用了
Bootstrap 的
表单组件和按钮，以及
Select2 的多选下拉框。我们在
表单中添加了一个关键词下拉框和一个添加关键词的按钮，点击按钮会在
表单中添加一个新的关键词输入框和移除按钮。我们还使用了一个 `<template>` 元素来定义关键词输入框和移除按钮的 HTML 模板，方便复用。
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
