简单的下拉框三级联动

Html

Css

var data = [{
        "id": 10,
        "name": '男装',
        "children": [{
                "id": 101,
                "name": '正装'
            },
            {
                "id": 102,
                "name": 'T恤'
            },
            {
                "id": 103,
                "name": '裤衩'
            }
        ]
    },
    {
        "id": 20,
        "name": '女装',
        "children": [{
                "id": 201,
                "name": '短裙'
            },
            {
                "id": 202,
                "name": '连衣裙'
            },
            {
                "id": 203,
                "name": '裤子',
                "children": [{
                        "id": 2031,
                        "name": '长裤'
                    },
                    {
                        "id": 2031,
                        "name": '九分裤'
                    },
                    {
                        "id": 2031,
                        "name": '七分裤'
                    }
                ]
            },
        ]
    },
    {
        "id": 30,
        "name": '童装',
        "children": [{
                "id": 301,
                "name": '帽子'
            },
            {
                "id": 302,
                "name": '套装',
                "children": [{
                        "id": 3021,
                        "name": "0-3岁"
                    },
                    {
                        "id": 3021,
                        "name": "3-6岁"
                    },
                    {
                        "id": 3021,
                        "name": "6-9岁"
                    },
                    {
                        "id": 3021,
                        "name": "9-12岁"
                    }
                ]
            },
            {
                "id": 303,
                "name": '手套'
            }
        ]
    }
];

function sels(arr) {
    var $sel = $("<select><option value='-1'>--请选择--</option></select>");

$(arr).each(function(index, num) {
        var $opts = $("<option value=" + num.id + ">" + num.name + "</option>");
        $sel.append($opts);
    });
    $sel.change(function() {
        while (this != this.parentNode.lastChild) {
            this.parentNode.removeChild(this.parentNode.lastChild);
        }
        var i = this.selectedIndex;
        var cata = arr[i - 1];
        if (i != 0 && cata.children) {
            sels(cata.children)
        }
    });
    $("#xialakuang").append($sel);
}
$(function() {
    sels(data);
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简单的下拉框三级联动



代码描述：使用jQuery实现三级联动

2

最新

发表评论全部评论

暂时没有评论！

冷水泡茶0

2017/7/14 16:07:14

我一直以为这是二级

西瓜0

2017/7/24 12:45:58

呵呵，不够仔细，童装是三级

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

桦仔wwh

相关代码

简单的下拉框三级联动

最新