php - Symfony Twig 无法创建 Select2 搜索栏
问题描述
我正在尝试使用 Select2 多个搜索栏,但我无法让它工作。如果我使用这个例子:ttskch/select2-bootstrap4-theme
<!DOCTYPE html>
<html>
<head>
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<!-- select2-bootstrap4-theme -->
<link href="select2-bootstrap4.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" target="_blank">@ttskch/select2-bootstrap4-theme</a></h3>
<hr>
<form>
<div class="form-group">
<label>Example select</label>
<select class="form-control" id="select-single" placeholder="Choose one thing" data-allow-clear="1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Example multiple select</label>
<select multiple class="form-control" placeholder="Choose anything" data-allow-clear="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
<!-- bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- select2-bootstrap4-theme -->
<script src="script.js"></script>
</body>
</html>
但不是这个,而是向我展示了这个:
我的 html 中缺少什么,为什么它不显示搜索栏?
解决方案
因为没有关于您的script.js的详细信息,所以我的建议是:
$('select').each(function(idx, ele) {
$(ele).select2({
theme: 'bootstrap4',
placeholder: ele.getAttribute('placeholder')
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/gh/ttskch/select2-bootstrap4-theme@master/dist/select2-bootstrap4.min.css" rel="stylesheet">
<div class="container mt-5">
<h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" target="_blank">@ttskch/select2-bootstrap4-theme</a></h3>
<hr>
<form>
<div class="form-group">
<label>Example select</label>
<select class="form-control" id="select-single" placeholder="Choose one thing" data-allow-clear="1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Example multiple select</label>
<select multiple class="form-control" placeholder="Choose anything" data-allow-clear="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
推荐阅读
- arrays - 用数组存储 k-ary 树
- charts - Chart.js 极坐标图
- python - Pandas XLSWriter - 返回而不是写入
- c# - 在 Visual Studio 中,如何维护一个引用同一类库的不同版本的项目?
- c - 复制缓冲区中的 IP 地址
- java - 包含列表的不可变类在没有列表的情况下不会抛出异常
- stm32 - 为什么 STM32F7 和 Telit GL865 GSM 调制解调器之间的 PPPoS 会话上的 LCP 协商不通过 LWIP 开始?
- javascript - JavaScript 创建 HTML 表格
- php - PHP 浮点数不保存到变量或准确回显
- laravel - Laravel 关系查询 - 获取所有已完成的项目