bootstrap-select 下拉框插件小记

菜鸟测试员lucas

于 2019-08-22 09:56:32 发布

阅读量180

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/duncan93/article/details/100007969

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在项目中引入JS和CSS文件，并详细讲解SelectPicker插件的使用方法，包括初始化、赋值、获取值等操作，以及如何实现下拉项的模糊搜索和多选功能。

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

引入js和css

<script type="text/javascript"
        src="/${res}/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
 <link rel="stylesheet" href="/${res}/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">

2. select标签引用 selectpicker
- data-live-search=true 支持下拉项模糊搜索默认为false

- multiple title="请选择分类" 可设置下拉多选绑定参数为数组 []

<select id="mdsx" class="form-control width-160 selectpicker "  id="mdsx" data-live-search="true" data-ng-model='search.ssqxdm'
                            data-ng-options="x.id as x.name for x in jlfkZd['GDSZZJGDM1']">
                            <option value="">请选择分类</option>
                        </select>

初始化值回显 $("#qdxzqh").selectpicker("refresh");
赋值 $("#zdxzqh").selectpicker("val", [""]);

获取值
$("#qdxzqh").val();