前言

select标签下拉列表里的数据条数太多，不好找，希望能对其添加一个模糊搜索的功能，找到了一个select2的插件解决了问题。现在简单整理其使用

select2：基于jQuery的下拉列表美化插件

官 网：http://select2.github.io/

github：https://github.com/select2/select2 （css和js文件在dist目录中）

简单使用步骤

1. 引入jQuery.js

   <script src="{path}/jquery.min.js"></script>
   

2. 引入select2的css和js

   <!-- CDN -->
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
   
   <!-- 本地 -->
   <link rel="stylesheet" href="{path}/select2.min.css"/>
   <script src="{path}/select2.min.js"></script>
   

3. 选择select标签调用select2方法

   html:

   <select class="select-example">
       <option value="1">北京大学</option>
       <option value="2">北京工业大学</option>
       <option value="3">哈尔滨工业大学</option>
   </select>
   

   js:

   $(document).ready(function() {
       $('.select-example').select2();
   });
   

效果