select2 - ajax方式请求数据简单调用

JS及CSS引入:

<link rel="stylesheet" type="text/css" href="select2/css/select2.min.css"/>
<script type="text/javascript" src="select2/js/select2.min.js"></script>
<script type="text/javascript" src="select2/js/i18n/zh-CN.js"></script>

HTML:
<select class="form-control" id="test"></select>

JS:
$("#test").select2({
	ajax: {
		url: 'test/getTestData',	// 接口地址
		dataType : 'json',		// 数据类型
		type : 'POST',			// 请求方式
		headers: interFaceHeader, 	// 接口header
		data: function (params) {
			return {
				condition: params.term // 接口参数(condition 参数名)
			};
		},
		processResults: function (data, params) {
			var datas = data.data;
			// 按照特定格式组装数据
			var options = new Array();
			$(datas).each(function(i, o) {
				options.push({
					id : o+i,
					text : o
				});
			});
			return {
				results: options
			};
		}
	},
    placeholder : '请选择',		// 提示信息
    multiple : true,			// 允许多个选项
    maximumSelectionLength : 3,	        // 最多三个
    allowClear : true,			// 可清空
    language: "zh-CN"			// 提示语言
});

搜索

相关阅读

友情链接