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

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();


  • 7
    点赞
  • 4
    收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

Apollo47

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值