用了这么久的Select2插件，应该写篇文章总结一下。一开始觉得Select2不是特别好用，但是找不到更好的下拉框插件。

在我的印象中，Select2有两个版本。最新版本有一些新特性，更新了方法参数，比原来的版本好。本文针对新版本。

官方网站：http://select2.github.io/

演示：

因为博客系统，只能演示简单的功能。

1.选择2.full.js，选择2 . min . CSS(4 . 0 . 1版)，jquery.1.8.3及以上应该引入文件

如果最新版本的select2引用了较低版本的jquery，则某些功能无法正常使用。示例：清除函数allowClear: true

请对最新版本使用select/select标记(您可以对本地化数据使用输入，但select必须用于ajax远程数据)

二.占位符

占位符占位符文本，如果需要清除功能，必须设置占位符。

三.正在加载本地数据

select2的默认数据属性是id和文本。新版本可以自定义，但最好使用默认值。因此，最好将提供的json转换为id和文本，并且可以添加其他属性。

var data=[{ id: 0，text: 'enhancement' }，{ id: 1，text: 'bug' }，{ id: 2，text: 'duplicate' }，{ id: 3，text: 'invalid' }，{ id: 4，text: '馄饨fix ' }]；$ ('# c01-select ')。选择2 ({data:data，placeholder : '，请选择'，allowclear3360true}) IV。加载远程数据

$(' # c01-select '). select 2({ aja x : { URL : ' data . JSON '，dataType: 'json '，delay: 250，data : function(params){ return { q : params . term，}；}，processResults:函数(数据){返回{ results:数据}；}，cache: true }，escapeMarkup:函数(标记){ return markup}，minimumInputLength: 1，templateResult: formatRepo，template selection : format restore })；描述：

1.q: params.term查询参数(params.term表示输入框中的内容，q出现在服务器的参数名称中；因此，您可以在这里添加自定义参数，例如stype:'person ')

2.在2.processResults中，Results: data返回数据(将最终数据返回到results，如果我的数据在data.res下，则返回data.res .这与服务器返回的json有关)

3.3.minimumInputLength查询所需输入的最小字符数，相关的maximumSelectionLength表示最大输入限制。

4 .转义标记字符转义处理

5.5.templateResult返回结果回调函数格式repo (repo) {returnrepo.text}，这样返回结果的文本就可以显示在下拉框中，当然可以返回repo.text ' 1等待

6 .模板选择所选项目调用函数模板选择(repo) {returnrepo.text}

7.关于返回的json格式：select2的默认json格式是[{ID:1，Text:' Text'}，{ID:2，Text:' Text'}]，这是新版严格要求的，当然也可以添加列，比如[{ID:1，Text: '

动词（verb的缩写）获取选定的项目

var RES=$(' # c01-select '). select 2(' data ')[0]；//选择varrespist=$ ('# c01-select ')。选择2(“数据”)；//选择多个if(res==undefined){ alert('您没有选择任何项目')；} if (respist.length) {alert('您可以选择任何项目')；} VI。空选项和设置不可用

//清空并选择$ ('# c01-select ')。val(空)。触发器('更改')；$('#c01-select ')。val('您的占位符')。触发器('更改')；//或者//如果使用的是输入标记(默认为本地数据)，可以使用$('#c01-select ')。val(“”)；要清除选项//disabled $ ('# c01-select ')。prop ('disabled '，false)；//可用$ ('# c01-select ')。prop ('disabled '，true)；//不可用七。启用多重选择

$(' # c01-select '). select 2({ data : data，multiple : true })；多选演示文稿：

八.以下是新版本和旧版本之间比较的简要说明

1.结果回调和所选回调的名称：formatResult，formatSelection(旧版本)；模板结果，模板选择(新版本)

2.初始化：

//旧版，注意如果初始化时文本框中没有值(null)，这个方法不会触发init selection :函数(element，callback) {var ID=$ (element)。val()；var数据={ id: id，text : id }；//这里是初始化的数据。您可以通过id (ajax)从服务器获取它，并将其加载到回调(数据)中。}//新版本，直接添加选项$ ('# id ')。追加(新选项(' jquery '，10001，false，true))选择；//或$ ('# id ')。追加('选项值=' 10001 ' jquery/option ')；3.获取或设置值：select2('val ')(旧版本)；$(“选择”)。val()(新版)

推荐使用

var RES=$(' # id '). select 2(' data ')；//返回数组，单次选择取RES[0]；优点是可以获取id、文本和其他属性，如RES[0]. name 4 .禁用或启用：$('select ')。使能(false)；(旧版)；$(“选择”)。prop('disabled '，true)；(新版)

5.主题风格：新的风格已经更新，但如果你想使用旧的风格，你可以设置主题： '经典'

如果还想深入学习，可以点击jquery下拉框效果总结和JavaScript下拉框效果总结进行学习。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。