select2的基本用法

公司有个项目需要用到类似百度搜索功能的下拉框，自然想到使用select2。

先看下select2的效果图，如下：

下来简单介绍下这个控件的基本用法，主要简单介绍下远程加载数据；

1.首先引入需要的文件:select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上.

2.远程加载数据示例

$("#simple").select2({

                ajax: {

                    url: 'Handler1.ashx',

                    dataType: "json",

                    delay: 250,

                    data: function (params) {

                        return {

                            q: params.term

                        };

                    },

                    processResults: function (data) {

                        return {

                            results: data

                        };

                    },

                    cache: true

                },

                escapeMarkup: function (markup) { return markup; },

                minimumInputLength: 1,

                placeholder: '请选择',

                allowClear: true

            });

与普通ajax调用不同的是data和processResults;

注意 data方法里面有个q:params.term这个是干什么的呢？其实这是获取当前输入值的，也就是上图中的“1”。这里的q:params.term;使用的时候直接照搬就行；当然你也可以把q换成你喜欢的参数名字。

processResults里面就是从后台获取数据结果的；最终返回的数据的格式一般是这样子："[{id:0,text:'a'},{id:1,text:'b'}]"（select2默认的数据属性是id、text听说新版本可以自定义）；

minimumInputLength同字面意思，即限制最少输入一个字符；

placeholder等同文本框的placeholder;

allowClear:true表示允许清除选中的内容，即为true的时候图中的“1”右边会出现一个“x”，点击后可以清除掉输入框的内容；

本人在使用的时候在这里遇见了一个大坑,就是你写了allowClear:true,但是点击上面的“x“后，没有反应，纳尼，嘛情况！
网上查了下，有人说，要allowClear:true生效，必须要设置placeholder属性，可是我写了呀。难道js文件和select2版本不匹配？
尝试个多个版本的js和select2还是这问题；

今天突然看到一篇外国的文章，解决了这个问题，其实很简单就是要allowClear:true生效，必须在<select>标签中添加一个空的<option>节点（可以不设置placeholder属性，因为控件有默认值）；如下：

<select id="simple" style="width: 120px;">

                <option></option>

            </select>

那这是为什么呢？原因是The first option must be empty in order to get placeholderworking!

巴特西

select2的基本用法

最新文章

热门文章