使用bootstrap-select多选下拉框，满足多选择数据库查询

最新推荐文章于 2025-06-20 15:24:56 发布

Tiesto_W

最新推荐文章于 2025-06-20 15:24:56 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习文章标签： bootstrap-select 下拉框多选

本文链接：https://blog.youkuaiyun.com/wuzzi/article/details/90763188

学习专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何利用bootstrap-select组件创建一个多选下拉框，用于数据库查询操作。详细步骤包括导入静态文件和编写HTML代码，通过示例展示了如何设置多个选择项，并在选择时触发change事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、导入静态文件

<script type="text/javascript" src="<c:url value="/text/javascript/jquery-1.9.1.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/text/lib/bootstrap/js/bootstrap.min.js"/>"></script>

<script type="text/javascript" src="<c:url value="/text/lib/bootstrap/js/bootstrap-select.js"/>"></script>
<script type="text/javascript" src="<c:url value="/text/lib/bootstrap/js/defaults-zh_CN.js"/>"></script>
<link rel="stylesheet" href="<c:url value="/text/lib/bootstrap/css/bootstrap-select.min.css"/>">

<link rel="stylesheet" href="<c:url value="/style/bootstrap/css/bootstrap.min.css"/>">
<link rel="stylesheet" href="<c:url value="/style/bootstrap/css/bootstrap-theme.min.css"/>">
<link rel="stylesheet" href="<c:url value="/style/css/app.css"/>">

2、下拉框代码

<div class="col-md-3">
    <div class="form-group">
        <select class="selectpicker" name="Doc_CarType" id="Doc_CarType" multiple title="请选择车型类别..." data-selected-text-format="count > 2" data-live-search="true" data-size="3" onchange ="changeMonth()">
            <%--<option value ="请选择车型">请选择车型</option>--%>
            <option value ="1">瑞风S5_20T_DCT </option>
            <option value ="2">瑞风S5_20T_6MT </option>
            <option value ="3">瑞风S3_CVT </option>
            <option value ="4">瑞风S7_20T_ACC版 </option>
            <option value ="5">瑞风S2_2016款 </option>
        </select>
    </div>
</div>