因为项目中需要关联用户，且数据比较多，为了便捷操作，以及防止重名，需要能搜索的下拉框，使用了select2来完成这个功能。使用select2的方式与问题

引入

<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>

使用select2只需要这两个css,js，当然，jquery.js是必须的。
个人建议下载后，在用本地路径。

使用select2

下面展示一些 内联代码片。

<div class="form-group row"><label class="col-sm-1 col-form-label">关联用户</label><div class="col-sm-10"><select class="form-control select2"  id="userId"><option value="1">张三-秦国</option><option value="2">李四-楚国</option><option value="3">王五-越国</option><option value="4">王者-赵国</option><option value="5">王舞-魏国</option></select></div></div>

一般来说的话，这样就完成了，直接就有效果，也能输入搜索。但是，可能是与本来的css不兼容，我遇到了样式的问题。
如下，框里的张三“掉下来了”：

问题与解决

对应这个样式下坠的问题，直接修改了 select2.css 文件里面的——

.select2-container .select2-selection–single {}
这个样式的高度 height: 28px; 去掉。
这样就能正常显示了。

动态数据获取

select2与一般的select的数据有差异，它需要特定的格式
，官方的数据结构如下：

{"results": [{"id": 1,"text": "Option 1"},{"id": 2,"text": "Option 2"}],"pagination": {"more": true}
}

需要id与text两个值，所以我们有前后端处理的两种方式。

第一种，前端处理

    $(function () {$('.select2').select2({ajax: {url: CONF_YDSURL + '/user/getNameList',success: function (result) {//select2 需要的格式id,textvar arr = [];$.each(result, function () {arr.push({id: this.id, text: this.text})})$('#userId').select2({placeholder: "请选择",allowClear: true,data: arr});},}});});

循环设置好对应的id与text。

   //select2 需要的格式id,textvar arr = [];$.each(result, function () {arr.push({id: this.id, text: this.text})})

第二种，后端处理

 @RequestMapping("/getNameList")public List<HashMap<String, Object>> getNameList() {List<HashMap<String, Object>> list = new ArrayList<>();List<UserVO> userList = userService.getNameList();for (UserVO user : userList) {HashMap<String, Object> map = new HashMap<>();map.put("id", user.getId());map.put("text", user.getName());list.add(map);}return list;}

map分装好后，放入list中，数据结构就跟select2需要的一致了。

提交传值给后端

获取 select2 里id的值 $("#userId option:checked").val()即可。

使用了button 按钮，οnclick=“save()”

    function save() {var data = {"userId": $("#userId option:checked").val(),"code": $("#code").val()}$.post("/admin/userDevice/insert", data, function (data) {location.reload()});}

在编辑页获取数据库中的数据

//select2回显，newOption绑定id，而不是select2类var newOption = new Option(data.fullName, data.userId, true, true);$('#userId').append(newOption).trigger('change');

之前一直绑定了$(’.select’)，结果一直不行，最后想到要绑定到id上
这是简单数据的一个小demo，服务器端过滤，或者数据量大需要分页需要用到 append()跟trigger()来加载，具体参考select2的官方文档：https://select2.org/.

select2的简单使用相关推荐

Select2 的简单使用
2019独角兽企业重金招聘Python工程师标准>>> 前段时间公司要求将项目中的下拉框度做修改,为了满足公司的要去,我最终找到了select2 这个js插件: 1. select ...
select2 属性标签整理
前言:由于自己感觉自己学的越来越杂,很多东西使用之后就忘掉了很大一部分,所以最近决定把自己学的东西通过博客的方式整理出来,看能不能把这些知识都串通起来 SELECT2 标签简单的关于以下API地址的 ...
使用select2实现多功能下拉框，select2中文api
最近项目中有个需求是商品能够选择多个标签,类似jire中选择标签: 能把选择后选项显示在输入框中,删除时连同整个标签一起删.经过网上咨询.请教同事后,得到一致意见是使用select2. 下面是使用se ...
flask-wtf优雅实现下拉多选框
flask-wtf实现下拉多选框一般实现一般情况下,我们用flask-wtf来实现下拉多选框的时候,大概是这样子操作的定义Form类 forms.py from flask_wtf import ...
Select2 鼠标点击空白处不消失简单测试和解决方法
新版本4.xx的select2有个bug,点击选择框下方的空白不消失.查看源码,原来需要: body{height:100%} 转载于:https://www.cnblogs.com/beiming ...
jQuery的select2下拉框的搜索功能(使用select2插件，方便简单)
第一步: 引入我们用使用的插件 jquery:<script type="text/javascript" src="http://cdn.bootcss.com/ ...
Jquery中使用select2插件实现ajax实时请求数据
场景效果 select2相关 select2官网: https://select2.org/ 实现引入select2 页面中需要引入select.full.min.js和select2.min.c ...
解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
bootstrap select2 php,JS组件Bootstrap Select2使用方法详解
在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的 ...

select2的简单使用

引入