写一个html页面,基于bootstrap与select2的 form表单 可以多关键词添加
时间: 2024-02-17 09:03:54 浏览: 30
好的,下面是一个基于 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 模板,方便复用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)