LinkageSelector

JavaScript 多级联动下拉菜单选择器 Frok me on GitHub

Demo 1

二级联动，子选项为空时默认设置 disabled。

var demo1 = new LinkageSelector({
    container: '#demo1',
    data: {
        水果: ['西瓜', '柠檬', '草莓', '荔枝', '橘子', '菠萝', '香蕉', '柚子', '苹果', '龙眼'],
        蔬菜: ['香菜', '青菜', '芦笋', '萝卜', '水芹', '黄瓜', '冬瓜', '番茄', '茄子', '土豆']
    }
});

Demo 2

省/市/区三级联动，带默认值，子选项为空时不处理。

var demo2 = new LinkageSelector({
    container: '#demo2',
    dataUrl: 'https://cdn.jsdelivr.net/gh/modood/Administrative-divisions-of-China/dist/pca.json',
    placeholder: ['省', '市', '区'],
    defaultValue: ['海南省', '三沙市', '西沙群岛'],
    emptyStyle: 'none',
    onChange: function(value) {
        console.log('#demo2', value);
    }
});

document.querySelector('#demo2 .set').onclick = function() {
    demo2.setValue(['云南省', '云南省', '呈贡区']);
}

document.querySelector('#demo2 .reset').onclick = function() {
    demo2.resetValue();
}

Demo 3

自动生成 select 元素，无占位项，子选项为空时隐藏，从 code 属性取值。

var demo3 = new LinkageSelector({
    container: '#demo3',
    dataUrl: 'https://cdn.jsdelivr.net/gh/modood/Administrative-divisions-of-China/dist/pcas-code.json',
    placeholder: false,
    emptyStyle: 'hidden',
    onRender: function(els) {
        [].forEach.call(els, function(el) {
            el.className = 'form-control mr-sm-2 mb-2';
        });
    },
    onChange: function(value) {
        console.log('#demo3:onChange', value);
    }
});