Bootstrap3插件系列：bootstrap-select2

最新推荐文章于 2025-07-11 13:32:47 发布

weixin_33881041

最新推荐文章于 2025-07-11 13:32:47 发布

阅读量778

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/libingql/p/6155852.html

本文介绍如何利用Select2插件实现美观且功能丰富的下拉选择框。包括从GitHub下载并引用Select2插件，通过示例代码演示如何进行初始化设置，并展示两种初始化方式：直接HTML选项及通过JavaScript数组数据。

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

1.下载插件

https://github.com/select2/select2

http://select2.github.io/

2.引用插件

<script src="~/Scripts/jquery-1.12.4.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.js"></script>

<link href="~/Content/bootstrap-select2.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-select2.min.js"></script>
<script src="~/Scripts/bootstrap-select2-zh-CN.js"></script>

3.下拉框初始化

　　示例代码：

<select class="bootstrap-select form-control">
    <option value="110000">北京市</option>
    <option value="120000">天津市</option>
    <option value="130000">河北省</option>
    <option value="140000">山西省</option>
    <option value="150000">内蒙古自治区</option>
</select>

<script type="text/javascript">
    $(function () {
        $(".bootstrap-select").select2();
    });
</script>

　　运行效果：

4. 数组数据初始化

　　示例代码：

<select class="bootstrap-select form-control"></select>

<script type="text/javascript">
    $(function () {
        var data = [
            { "id": "110000", "text": "北京市" },
            { "id": "120000", "text": "天津市" },
            { "id": "130000", "text": "河北省" },
            { "id": "140000", "text": "山西省" },
            { "id": "150000", "text": "内蒙古自治区" }
        ]
        $(".bootstrap-select").select2({
            data: data
        });
    });
</script>