Select2是一款基于JQuery的下拉列表插件,主要用来优化select,支持单选和多选,同时也支持分组显示、列表检索、远程获取数据等众多好用的功能
项目地址:https://select2.org/
基本使用
需要用到的JS和CSS文件位于项目代码下的dist目录中,需要将这个目录中的对应文件放入你的项目里,这一步不赘述
- 引入CSS/JS文件,由于Select2是基于Jquery的,所以要先引入Jquery,这里我们都直接引入CDN的地址
<!-- 加载 Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- 加载 Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js">
</script>
- 初始化Select2
<select class="form-control" id="id_select2_demo1">
<option value="">-----单选-----</option>
<option value="1">OPS-COFFEE-A</option>
<option value="2">OPS-COFFEE-B</option>
<option value="3">OPS-COFFEE-C</option>
<option value="4">OPS-COFFEE-D</option>
<option value="5">OPS-COFFEE-E</option>
<option value="6">OPS-COFFEE-F</option>
<option value="7">OPS-COFFEE-G</option>
</select>
<script> var selectorx = $('#id_select2_demo1').select2(); </script>
- 完成以上两步可