前端电商 SKU 组合商品规格属性选择示例

原创已于 2025-03-07 18:06:20 修改 · 7.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#套餐 #商品属性 #仿淘宝 #SKU

于 2018-04-25 16:02:56 首次发布

Web 专栏收录该内容

87 篇文章

订阅专栏

本文介绍了一个模仿淘宝网站中使用的组合选择器功能的简单实现。该实现使用了HTML、CSS和JavaScript技术，并提供了完整的源代码示例。通过点击不同的选项，用户可以进行选择并看到所选项目的视觉反馈。

预览图：

还是动态的呢

红框右下角那玩意儿仿的淘宝

GitHub：https://github.com/maxsky/imitate-tb-combo-select

预览地址：Product SKU select

数据格式参考：

{
    "attrs": [{
        "id": 1,
        "name": "颜色",
        "options": [{
            "id": 1000,
            "name": "黑色",
            "selected": false
        }, {
            "id": 2000,
            "name": "蓝色",
            "selected": false
        }]
    }, {
        "id": 2,
        "name": "内存",
        "options": [{
            "id": 3000,
            "name": "128G",
            "selected": false
        }, {
            "id": 4000,
            "name": "256G",
            "selected": false
        }]
    }, {
        "id": 3,
        "name": "网络类型",
        "options": [{
            "id": 5000,
            "name": "移动",
            "selected": false
        }, {
            "id": 6000,
            "name": "联通",
            "selected": false
        }]
    }],
    "sku_list": [
        [1000, 3000, 5000],
        [1000, 4000, 5000],
        [1000, 4000, 6000],
        [2000, 3000, 5000],
        [2000, 4000, 5000],
        [2000, 4000, 6000]
    ]
}