实现联动下拉菜单与动态价格更新的教程-html教程-PHP中文网

实现联动下拉菜单与动态价格更新的教程

本教程旨在指导开发者如何实现前端页面中两个联动选择框的功能，并根据用户的选择动态更新商品价格。文章将重点解决在选择项变更后价格未能及时清除或更新的问题，通过优化事件监听机制、引入数据驱动的价格配置以及统一的更新函数，确保价格显示逻辑的准确性和用户体验。

一、引言：联动选择与动态价格的挑战

在电商或配置类产品页面中，用户经常需要通过多个选择框来定制商品，例如选择打印类型和尺寸。这些选择框之间往往存在联动关系：一个选择项的改变可能会影响另一个选择框的可用选项，并最终决定商品的价格。一个常见的问题是，当用户改变其中一个选择项时，如果新的组合没有对应的价格，旧的价格信息可能仍然显示，导致错误的价格被添加到购物车。本教程将详细介绍如何构建一个健壮的联动选择系统，并确保价格显示逻辑的准确性。

二、 HTML结构：商品选择器基础

首先，我们需要一个清晰的HTML结构来承载打印类型选择、尺寸选择、价格显示以及添加到购物车按钮。

<div class="shop-item">
    <span class="shop-item-title">商品标题</span>
    <img class="shop-item-image" src="../IMG/ESPSTORE41.jpg" alt="商品图片">
    <span class="shop-item-src1" style="display:none;">../IMG/ESPSTORE41.jpg</span>
    <div class="shop-item-details">
        <!-- 打印类型选择框 -->
        <select name="menu1" id="print-type1">
            <option value="24x36,20x30,17x25.5,16x24,13x19,12x18,10x15">SELECT PRINT TYPE</option>
            <option value="24x36,20x30,16x24,12x18">SATIN</option>
            <option value="17x25.5,13x19,10x15">LUSTRE</option>
            <option value="24x36">CANVAS</option>
            <option value="24x36,20x30">ALUMINUM PHOTO PANEL</option>
        </select>

        <!-- 尺寸选择框 -->
        <select name="menu2" id="size-type1">
            <option value="">SELECT SIZE</option>
            <option value="24x36">24x36</option>
            <option value="20x30">20x30</option>
            <option value="17x25.5">17x25.5</option>
            <option value="16x24">16x24</option>
            <option value="13x19">13x19</option>
            <option value="12x18">12x18</option>
            <option value="10x15">10x15</option>
        </select>

        <!-- 价格显示区域 -->
        <span id="shop-item-price1" class="shop-item-price"></span>
        <!-- 添加到购物车按钮 -->
        <button id="shop-item-button1" class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
    </div>
</div>

登录后复制

HTML结构要点：

print-type1 选择框的 option 元素的 value 属性包含了该打印类型支持的所有尺寸，以逗号分隔。这为尺寸选择框的动态过滤提供了数据源。
size-type1 选择框的 option 元素 value 属性是其尺寸值。
shop-item-price1 是一个 span 元素，用于动态显示计算出的价格。

三、 JavaScript逻辑：实现联动与价格更新

为了实现联动和价格更新，我们需要编写JavaScript代码来响应用户的选择变化。核心思想是：当任何一个选择框发生变化时，都重新评估当前的打印类型和尺寸，然后更新尺寸选项和显示对应的价格。

3.1 价格配置数据结构

为了提高代码的可维护性和可读性，我们应将价格数据从硬编码的 if/else if 语句中分离出来，使用一个JavaScript对象来存储。

const priceConfiguration = {
    'SATIN': {
        '24x36': '$200',
        '20x30': '$170',
        '16x24': '$150',
        '12x18': '$130'
    },
    'LUSTRE': {
        '17x25.5': '$180',
        '13x19': '$140',
        '10x15': '$110'
    },
    'CANVAS': {
        '24x36': '$300'
    },
    'ALUMINUM PHOTO PANEL': {
        '24x36': '$400',
        '20x30': '$350'
    }
    // 根据需要添加更多打印类型和尺寸的价格
};

登录后复制

3.2 统一的更新函数

我们将创建一个名为 updateProductDisplay 的函数，它将负责处理所有UI更新逻辑：过滤尺寸选项和更新价格。这个函数将在两个选择框的 change 事件中被调用。

// 获取DOM元素
const printTypeSelect = document.getElementById('print-type1');
const sizeTypeSelect = document.getElementById('size-type1');
const shopItemPrice = document.getElementById('shop-item-price1');
const sizeTypeOptions = Array.from(sizeTypeSelect.children); // 存储所有原始尺寸选项

/**
 * 根据当前选择的打印类型和尺寸，更新尺寸选择框的选项并显示对应价格。
 */
function updateProductDisplay() {
    const selectedPrintOption = printTypeSelect.options[printTypeSelect.selectedIndex];
    const selectedPrintTypeText = selectedPrintOption.text;
    const selectedPrintTypeValues = selectedPrintOption.value.split(','); // 获取当前打印类型支持的尺寸列表

    const selectedSizeOption = sizeTypeSelect.options[sizeTypeSelect.selectedIndex];
    const selectedSizeText = selectedSizeOption.text;

    // 1. 过滤尺寸选择框的选项
    // 重新填充尺寸选择框，只显示与当前打印类型匹配的选项
    sizeTypeSelect.innerHTML = ''; // 清空现有选项

    // 添加默认的“SELECT SIZE”选项
    const defaultSizeOption = document.createElement('option');
    defaultSizeOption.value = '';
    defaultSizeOption.textContent = 'SELECT SIZE';
    sizeTypeSelect.appendChild(defaultSizeOption);

    // 过滤并添加匹配的尺寸选项
    sizeTypeOptions.forEach(option => {
        // 如果选项是“SELECT SIZE”或其值包含在当前打印类型的支持尺寸列表中
        if (option.value === '' || selectedPrintTypeValues.includes(option.value)) {
            sizeTypeSelect.appendChild(option.cloneNode(true)); // 克隆节点以避免DOM操作问题
        }
    });

    // 尝试重新选择之前选中的尺寸，如果它仍然可用
    let sizeFound = false;
    for (let i = 0; i < sizeTypeSelect.options.length; i++) {
        if (sizeTypeSelect.options[i].text === selectedSizeText) {
            sizeTypeSelect.options[i].selected = true;
            sizeFound = true;
            break;
        }
    }
    // 如果之前选中的尺寸不再可用，则默认选择“SELECT SIZE”
    if (!sizeFound && selectedSizeText !== 'SELECT SIZE') {
         sizeTypeSelect.value = ''; // 确保选中“SELECT SIZE”
    }


    // 2. 更新价格显示
    let price = '';
    // 只有当打印类型和尺寸都不是默认选项时才查找价格
    if (selectedPrintTypeText !== 'SELECT PRINT TYPE' && selectedSizeText !== 'SELECT SIZE') {
        const typePrices = priceConfiguration[selectedPrintTypeText];
        if (typePrices) {
            price = typePrices[selectedSizeText] || ''; // 如果没有找到对应尺寸的价格，则为空
        }
    }
    shopItemPrice.innerText = price;
}

// 3. 绑定事件监听器
printTypeSelect.addEventListener('change', updateProductDisplay);
sizeTypeSelect.addEventListener('change', updateProductDisplay);

// 4. 页面加载时执行一次，设置初始状态
document.addEventListener('DOMContentLoaded', updateProductDisplay);

登录后复制

代码要点解释：

Tellers AI

Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。

查看详情

sizeTypeOptions 数组： 在初始化时，我们获取并存储了所有原始的尺寸选项。这是为了在每次 printTypeSelect 改变时，都能从完整的尺寸列表中进行过滤，而不是在已经过滤过的列表中再次过滤。
过滤尺寸选项： 当 printTypeSelect 改变时，updateProductDisplay 会清空 sizeTypeSelect，然后根据 selectedPrintTypeValues 重新填充可用的尺寸选项。
保持选中状态： 在过滤尺寸后，代码会尝试重新选中用户之前选择的尺寸。如果该尺寸在新的打印类型下不可用，则会自动回退到“SELECT SIZE”。
价格查找： 只有当 selectedPrintTypeText 和 selectedSizeText 都不是默认的“SELECT PRINT TYPE”或“SELECT SIZE”时，才会在 priceConfiguration 中查找价格。
price || ''： 如果在 priceConfiguration 中没有找到匹配的价格组合，price 变量将被赋值为空字符串，从而清除价格显示。这是解决“价格不清除”问题的关键。
事件监听器： updateProductDisplay 函数被绑定到两个选择框的 change 事件上，确保任何一个选择框的变化都会触发UI更新。
DOMContentLoaded： 确保页面加载完成后，立即调用 updateProductDisplay 来设置初始的UI状态。

3.3 添加到购物车逻辑优化

在用户点击“ADD TO CART”按钮时，我们需要确保只有在有效价格显示时才能添加商品。

const addToCartButton = document.getElementById('shop-item-button1');

addToCartButton.addEventListener('click', function(event) {
    const priceElement = document.getElementById('shop-item-price1');
    const currentPrice = priceElement.innerText;

    if (currentPrice === '' || currentPrice === 'SELECT SIZE') { // 检查价格是否为空或无效
        alert('Please select a valid Print Type and Size to see the price.');
        return;
    }

    // 获取其他商品信息
    const shopItem = event.target.parentElement.parentElement;
    const title = shopItem.getElementsByClassName('shop-item-title')[0].innerText;
    const imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src;
    const rawImageSrc = shopItem.getElementsByClassName('shop-item-src1')[0].innerText; // 原始图片路径

    const selectedPrintType = printTypeSelect.options[printTypeSelect.selectedIndex].text;
    const selectedSize = sizeTypeSelect.options[sizeTypeSelect.selectedIndex].text;

    // 假设您有一个 addItemToCart 函数来处理添加到购物车的逻辑
    addItemToCart(title, currentPrice, imageSrc, rawImageSrc, selectedPrintType, selectedSize);
});

// 示例：添加到购物车函数（根据您的实际需求进行修改）
function addItemToCart(title, price, imageSrc, rawImageSrc, printType, size) {
    console.log('Adding to cart:', {
        title: title,
        price: price,
        image: imageSrc,
        rawImage: rawImageSrc,
        printType: printType,
        size: size
    });

    // 存储到 localStorage
    localStorage.setItem("itemTitle", title);
    localStorage.setItem("itemPrice", price);
    localStorage.setItem("itemImageSrc", rawImageSrc); // 存储原始路径
    localStorage.setItem("itemPrintType", printType);
    localStorage.setItem("itemSize", size);

    alert("Added To Cart!");
    // 可以重定向到购物车页面或更新购物车UI
}

登录后复制

添加到购物车要点：