前端表单需要使用ajax查询数据并选择的场景很多，今天就想起使用select2处理这样的问题，记录一下代码，省的每次都去网上找。

上代码：

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

dom

<select class="js-example-data-ajax form-control" style="width: 100%" id="changeDeptId">
</select>

js

$('#changeDeptId').select2({
	  ajax: {
	    url: function (params) {
	        return personnel_service_ip+'/departments';
	    },
	    data: function (params) {
          return {
          	params:{
          		deptName: params.term, // search term 请求参数 ， 请求框中输入的参数
          		deptType: 7
          	},
          	offset: 0,
          	limit:100
          };

      },
	    processResults: function (data) {

          var itemList = [];
          var arr = data.data;
          for(item in arr){
              itemList.push({id: arr[item].id, text: arr[item].deptName})
          }

          return {
              results: itemList
          };
	    }
	    
	},
  placeholder:'----请选择-----',//默认文字提示
  language: "zh-CN"
});

备注：

如果在bootstrap的模态框中使用，可能会有输入查询框中不能输入的问题，需要在加载bootstrap modal模态框之前加入如下代码：

$.fn.modal.Constructor.prototype.enforceFocus = function () { }

ClassInstance

select2下拉选择框ajax搜索加载数据

相关文章

推荐文章

热门文章

标签列表