select2 动态搜索，赋初始值--各种问题总结呀

最新推荐文章于 2024-08-23 07:50:23 发布

Apollo47

最新推荐文章于 2024-08-23 07:50:23 发布

阅读量3.8w

点赞数 7

分类专栏：技术文档文章标签： ajax select2

本文链接：https://blog.csdn.net/Apollo47/article/details/54612930

版权

技术文档专栏收录该内容

8 篇文章 0 订阅

订阅专栏

select2问题很多，使用过程中各种问题，总结一下。

我用的是jquery select2-3.4版本。

因为编辑界面有个字段要选择输入，可选择数据太多，所以采用边输边搜。

一开始网上搜了select2动态搜索的用法，网上有一些，大家可以参考一下以下帖子。

http://www.jianshu.com/p/c5ab74b91b2e

http://www.cnblogs.com/liuxiaobo93/p/5112993.html

http://blog.csdn.net/ml01010736/article/details/49865693

1、打开页面就报错： Option ‘ajax' is not allowed for Select2 when attached to a <select> element。

整了很久，终于找到一个帖子说不能<select>标签，要改成 <input type="hidden" id="select2Input" ...>，改完解决这个问题。官网说新版没这个问题了，没试。

2、输入搜索时报错： Uncaught Error : P.results ..........

各种搜索找答案，发现有个帖子说不能要processResults方法处理服务端返回值，要用results方法替换，好吧。

3、接着又出现，大致是 Uncaught Error : toUpperCase() is not function.....

又是各种搜索加尝试，终于解决了，要履写 formatResult 方法。

现在把我的完整代码贴出来：

$(document).ready(function() {
			$("#landNameSelect").select2({
		        theme: "bootstrap",
		        allowClear: true,
		        language : 'zh-CN',
		        placeholder: {id:"2", text:"text2"},

		        query: function (query){
		        	var url = "/a/info/landInfo/selectLand";
		        	var param = {name:query.term}; // 查询参数，query.term为用户在select2中的输入内容.
		        	var type="json";
		        	var data = { results: [] };
		        	$.post(url, param, function(datas){
		        	   for(var i= 0, len=datas.length;i<len;i++){
		                	var land = datas[i];
		                        var option = {"id":land.id, "text": land.name};
		                        data.results.push(option);
		                   }
		        	   query.callback(data);
		        	}, type);
		        	
		        },
		        escapeMarkup: function (markup) {return markup; },
		        minimumInputLength: 2,
		        formatResult:function(data){return '<div class="select2-user-result">' + data.text + '</div>'},
		        formatSelection: function(data){
		        	console.log("选中option");
		        	console.log(data.id + data.text);

		        	return data.text;
		        },
		        initSelection:function(data, cb){console.log(data); cb(data);}
		    }); // select2方法结束.
		  // 赋初始值，placeholder中的id值要此处相等。
		  $("#landNameSelect").select2("data", {"id":"2", "text":"text_123456abc"});

		});

我在各种问题的尝试中，用query代替了ajax方法，我想用ajax方法也是可以的。

4、赋值初始值的问题

上面贴出来的代码已经有了，用placeholder来处理。

5、赋值方法，取值方法

在使用普通select2（非动态搜索）的情况下，如多个select间联动，怎么赋值：

赋值：$("#select2_id").select2("val", "value值"); 听说 4.x版本可以 $("#select2_id").val("value值"); 不过我没试过。

取值： $("#select2_id").select2("val"); 或者 $("#select2_id").val();