Select2下拉框实战-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35614955/article/details/116974965

因为项目中需要关联用户，且数据比较多，为了便捷操作，以及防止重名，需要能搜索的下拉框，使用了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,text
                    var arr = [];
                    $.each(result, function () {
                        arr.push({id: this.id, text: this.text})
                    })
                    $('#userId').select2({
                        placeholder: "请选择",
                        allowClear: true,
                        data: arr
                    });
                },
            }
        });

    });

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

   //select2 需要的格式id,text
   var 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');