Mather

We create our own demons.

Select2 更好的下拉列表(下)

默认分类 0 评

select2-1.png

上篇文章 通过搜索 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 项,需要设置 idtext并触发一次 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();
}

Demo

[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 "官网")

Gulp - JavaScript 世界的构建工具

发表评论
撰写评论