1.官网 地址 https://select2.github.io/
2. 使用
<!-- select2 --> <link rel="stylesheet" href="${ctx}/static/comp/select2/css/select2.min.css"> <script src="${ctx}/static/comp/select2/js/select2.min.js"></script>
<select id="port_id" class="form-control"> <option>全部</option> <option>站点001</option> <option>站点002</option> </select>
<script > $(function (){ $("#port_id").select2({ width:"100px", minimumResultsForSearch: -1 }); }); </script>
3 .api
width 宽度 字符串
minimumResultsForSearch 设置为 -1 ,去掉 搜索框
placeholder 选择框中 显示的提示文字
allowClear: true 是否有 清除的符号(有个叉号 点击清除 )
4.说明
(1)select2 的 数据源属性为 id 、text; id为value,text为select标签显示的字符串
(2)有两种数据源加载方式
静态数组的数据源:
<script type="text/javascript">
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$(".js-example-data-array").select2({ data: data }) $(".js-example-data-array-selected").select2({ data: data }) </script> <select class="js-example-data-array"></select> <select class="js-example-data-array-selected"> <option value="2" selected="selected">duplicate</option> </select>
另一种是 ajax方式
$("#area").select2({ width:"200px", minimumResultsForSearch:-1, placeholder:"请选择", ajax: { url: path + "/province/provinceCombobox", dataType: 'json', delay: 200, processResults: function (data, params) { // 如果 接口数据 格式 格式 id、text 则 转化一下 data = $.map(data, function (obj) { obj.id = obj.id || obj.code; obj.text = obj.text || obj.name; return obj; }); return { results: data }; } } }); //ajax 返回 id、text 为对象的 数组;关键 的地方 processResults 函数中 处理返回值 { results: data};