<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSCEC8B-GD-CM</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入jQuery -->
<script src="/static/plugins/jquery.slim.js"></script>
<link rel="stylesheet" href="//www.greatytc.com/static/css/bootstrap4.min.css">
<script src="/static/plugins/bootstrap4.bundle.min.js"></script>
<!-- 引入Bootstrap Select CSS -->
<link rel="stylesheet" href="/static/css/bootstrap-select.css">
<!-- 引入Bootstrap Select JS -->
<script src="/static/plugins/bootstrap-select.js"></script>
</head>
<body>
<div class="accordion-body">
<label for="boq_type_id">类别
<select name="selectpicker_boq" class="selectpicker" id="selectpicker_id" multiple="multiple">
</select>
</label>
</div>
<script>
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
//数据赋值
var select = $("#selectpicker_id");
select.append("<option value='1'>一级标题</option>");
select.append("<option value='2'>二级标题</option>");
select.append("<option value='3'>三级标题</option>");
select.append("<option value='4'>四级标题</option>");
select.append("<option value='5'>清单</option>");
select.append("<option value='6'>定额</option>");
</script>
</body>
</html>
image.png
如果只显示上图,不能下拉,就要检查bootstrap版本是不是和bootstrap-select匹配,2024年5月用bootstrap-select 5.是不能正常使用的,4可以。