天天看點

jquery select2插件 改造 Select2 How to use Modify By

Select2

How to use

<link href="/select2/select2.min.css" rel="stylesheet" />

...................
...................

<script type="text/javascript" src="/select2/select2.min.js"></script>
<script type="text/javascript" src="/select2/i18n/zh-CN.js"></script>
<select id="select_id">
   
</select>
      

You need script like this:

<script>
 
#1. added maximumDisplayOptionsLength options in select2
# format of data_info: [{"id":"100","text":"JasonLi","code":"li"},{"id":"101","text":"Tomas","code":"tt"}]

	$('#select_id').select2({
    		data:data_info,
    		placeholder:"請您選擇",
    		minimumInputLength:1,
    		maximumDisplayOptionsLength:5,
    		language:"zh-CN",width:"349px",
    		templateResult:myTemplateResult,templateSelection:myTemplateSelection
    		});
			
function myTemplateResult(res){
	if (res.loading) return res.text;
	res.id = res.id;
	if (isNotEmpty(res.code)) {
		return res.code + ":" + res.text;
	} else {return res.text;}
}

function myTemplateSelection(res){	
	return res.text;
}
</script>
      

Modify By

JasonLi

# My Source https://github.com/jiuli/select2

#Origin Source https://github.com/select2/select2