前端插件之Select2使用

Select2是一款基于JQuery的下拉列表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等众多好用的功能

项目地址：https://select2.org/

基本使用

需要用到的JS和CSS文件位于项目代码下的dist目录中，需要将这个目录中的对应文件放入你的项目里，这一步不赘述

1. 引入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>

1. 初始化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>

1. 完成以上两步可