README

当顺序很重要时...

将多选下拉列表转换为两个列表：左边的为选择列表，右边的为已选列表。类似于使用Ctrl和Shift键的多选选择模式。支持拖放。允许重新排序已选项目

演示

https://philippemarcmeyer.github.io/vanillaSelectChooser/index.html?v=0.37

用法

创建一个多选属性，例如

<select id="brands"> ... </select>

实例化 vanillaSelectChooser()

示例

let chooser = new vanillaSelectChooser("#brands", 
    {
        minWidth: 180, 
        maxHeight: 400,
        addButtonWidth:50,
        gapBeetween:100
    }
);

销毁：您可以

chooser.destroy()

来销毁它

选项

minWidth：列表的宽度，默认为200（px）
maxHeight：列表的最大高度，滚动条出现的地方，默认为400（px）
addButtonWidth：除在小屏幕上外，两列之间有一个按钮允许将多个项目添加到第二个列表中，默认为60（px）
gapBetween：两个列表之间的空间（应大于 addButtonWidth），默认为120（px）
translations：默认为{ "available": "可用", "chosen": "已选" }，翻译成您的语言或更改标题

onchange事件

onchange事件仍然在select上可用

获取结果

直接在select中获取结果

示例

function getSelectValues() {
    let values = [];
    let options = document.querySelectorAll("#brands option");
    Array.prototype.slice.call(options).forEach(function (x) {
        if (x.hasAttribute("selected")) {
            values.push(x.value);
        }
    });
    return values;
}

历史版本

v0.37：支持IE 11

v0.36：良好效果

v0.35：从左到右列的拖放多选和排序修改（放置元素在目标元素之前）

v0.30：可拖放排序（新设计）

v0.27：IE 11兼容性：-(

v0.26：修复destroy()函数 + 添加新选项 + CSS更改

v0.25：基本的触摸屏支持（无全局添加按钮（">"）和列之间的空间减少到10 px）

v0.20：使用Ctrl和Shift键模拟选择 + 添加按钮

v0.10：第一个完全工作的版本

v0.01：第一个原型，工作中...

philippemarcmeyer / vanillaselectchooser

维护者

详细信息