Select2 更好的下拉列表（下）

上篇文章 通过搜索 Github 仓库的栗子来阐述了 Select2 中数据的流动，但多数需求并不需要实时读取后端数据。

Select2作为表单组件，与原生 input select 般能读取和初始化 value。
来看常用的 单选 和 多选 操作是怎么实现的。

使用 Select2 作单选控件时，像原生 select 直接使用 val() 方法 读取 其值。

You will still need to add in the placeholder option if you are using a single select.

默认的选项是数据的第一个值，这导致 placeholder 会被选项覆盖，增加一个 空的数据 或 清除默认值。

var select2 = $('select');//Init
select2.val();//Read the selected option
select2.val(1).trigger('change');//Set radio
select2.val(null).trigger('change');//Clear option

原生的多选组件一直不受开发者欢迎，样式不好看且操作不方便。

<select name="status" multiple="multiple" style="width: 200px;">
</select>

多选时的 Select2 只需在标签中加上 multiple="multiple"。

var select2 = $('select');//Init
select2.val([1,3,4]).trigger('change');//Pass in an array

清除和读取选和 单选 一样，但设置多个选项选时，应给val() 传入一个由原始数据的id属性组成的数组，如果一个个分开传入，只会选中最后一个值。

老师能不能再给力一点

当数据由远端提供，多选的下拉列表又要有默认值？这似乎是个麻烦的问题。

先来看看这组 不是很合符 Select2 规定的数据，没有了text 字段，不用担心我们可以在processResults 函数中进行处理。
这是这组数据源：

{
  "119": { "id": "119", "name": "Apple", "price": "12" },
  "120": { "id": "120", "name": "banana", "price": "8" },
  "125": { "id": "125", "name": "watermelon", "price": "10" },
  "126": { "id": "126", "name": "pear", "price": "2" }
}

在processResults 函数中将对象的值循环出来，name 重新赋值给 text：

processResults: function(data) {
    var processData = [];
    for (key in data) {
        var one = {};
        one.id = data[key].id;
        one.text = data[key].name;
        one.price = data[key].price;
        processData.push(one);
    }
    return {
        results: processData
    };
}

这样，数据被处理成便于渲染和选择用的格式。
id 为选项的值，text 为选项的显示文本，price 也作为额外的显示本文。

[
    { "id": "119", "text": "Apple", "price": "12" },
    { "id": "120", "text": "banana", "price": "8" },
    { "id": "125", "text": "watermelon", "price": "10" },
    { "id": "126", "text": "pear", "price": "2" }
]

接下来便是自定义渲染列表的两个函数：

function formatList(list) {
    var markup = "<ul>" +
    "<li>" +
    "<p>" + list.text + "</p>" +
    "<p> price: " + list.price + "</p>" +
    "</li>" +
    "</ul>";
    return markup;
}

function formatListSelection(list) {
    return list.text;
}

这样子，我们仿造了官方的栗子重新实现了远端搜索的功能。
某些情况下选择项已经存在默认值，处于编辑状态。
比如我们要使多选默认选中 Apple 项，需要设置 id 和 text并触发一次 change 事件。

//set default value
var $option = $("<option selected></option>").val("119").text("Apple");
S2.append($option).trigger('change');
$option.removeData();

如果默认选中了多个值，编写一个循环去执行即可。

for (var i in defaultData) {
    var $option = $("<option selected></option>")
    .val(defaultData[i].id)
    .text(defaultData[i].text);
    S2.append($option).trigger('change');
    $option.removeData();
}

[auto-iframe link="//jsfiddle.net/Mather/2gkppqmq/embedded/" height="400px" ]

[Select2 4.0.0 initial value with Ajax - stackoverflow

](https://stackoverflow.com/questions/30316586/select2-4-0-0-initial-value-with-ajax "官网")