bootstrap-select使用

冰风漫天

于 2020-02-06 21:14:05 发布

阅读量553

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript bootstrap html 文章标签： bootstrap javascript jquery select

本文链接：https://blog.youkuaiyun.com/zhangenter/article/details/104202079

html 同时被 3 个专栏收录

4 篇文章

订阅专栏

javascript

1 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

本文详细介绍如何在项目中引入并使用Bootstrap Select组件，包括github资源地址、必要的css和js文件引用，以及示例代码展示如何创建下拉选择框，并提供获取选中值的方法和事件监听的实现。

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

github地址
https://github.com/snapappointments/bootstrap-select/

css

<link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/bootstrap/css/bootstrap-select.min.css" rel="stylesheet">

js(注意：bootstrap不带popper，所以要单独引用popper.min.js，而且这个popper.min.js必须在bootstrap.min.js前引用)

<script src="../static/js/jquery.min.js"></script>
<script src="../static/bootstrap/js/popper.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/bootstrap/js/bootstrap-select.min.js"></script>

使用方式

<select id="my_picker" class="selectpicker" title="选择语言">
 <option value="1">C#</option>
 <option value="2">JAVA</option>
 <option value="3">PYTHON</option>
</select>

效果图
在这里插入图片描述
获取选中值的方式

$("#my_picker").val()

或者

$("#my_picker").selectpicker("val")

如果要设置选中事件可以写

$('#my_picker').on('changed.bs.select',function(e){
  console.log(e.target.value);
});