js仿商品规格选择

基础概念

JavaScript 仿商品规格选择是一种常见的前端交互功能，允许用户在网页上选择商品的规格（如颜色、尺寸等）。这种功能通常通过动态生成选项、监听用户选择事件并更新页面内容来实现。

类型

单选规格：用户只能选择一种规格（如颜色）。
多选规格：用户可以选择多种规格（如颜色和尺寸）。
组合规格：用户选择多个规格后，系统会显示所有可能的组合及其价格和库存信息。

应用场景

电商网站：用户在购买商品时选择不同的颜色、尺寸等。
定制产品页面：用户可以根据自己的需求定制产品的各项参数。
活动报名表单：用户选择参与活动的不同选项。

示例代码

以下是一个简单的JavaScript仿商品规格选择的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品规格选择</title>
    <style>
        .option {
            margin: 10px;
            padding: 5px;
            cursor: pointer;
        }
        .selected {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div id="specifications">
        <div class="option" data-value="red">红色</div>
        <div class="option" data-value="blue">蓝色</div>
        <div class="option" data-value="green">绿色</div>
    </div>
    <div id="selected-spec"></div>

    <script>
        document.querySelectorAll('.option').forEach(option => {
            option.addEventListener('click', function() {
                // 移除所有选项的选中状态
                document.querySelectorAll('.option').forEach(el => el.classList.remove('selected'));
                // 添加当前选项的选中状态
                this.classList.add('selected');
                // 更新选中的规格显示
                document.getElementById('selected-spec').innerText = `已选择: ${this.getAttribute('data-value')}`;
            });
        });
    </script>
</body>
</html>