JavaScript函数if-else执行异常，购物车显示逻辑修复求助

数据老陈

2026-8-23

问题描述

更新：脚本现已正常运行
我在网站中嵌入了一段脚本，但之前无法正常工作。以下是问题详情：

我知道这段代码可以更简洁，但我的JavaScript知识有限，能写到这里已经很不容易了。

当前功能接近正常：

选择下拉框中的尺寸时，对应的div会通过display: flex显示，id为#Item-cart-none的元素会隐藏；
在同一个下拉框中选择其他选项时，之前显示的div会隐藏，新选项对应的div会显示，此时#Item-cart-none保持隐藏；
在同一个下拉框中选择“geen”选项时，#Item-cart-none会重新显示。

现在的问题：当两个下拉框都选择了尺寸后，将其中一个下拉框切换为“geen”选项时，#Item-cart-none会错误地重新显示。这不符合预期，该元素应仅在两个下拉框均未选择有效尺寸，或均选择“geen”选项时才显示。

补充说明：当两个下拉框都选择尺寸时，对应的两个div应同时显示，这是代码的核心需求——即向“购物车”添加多个打印品时，它们都会在购物车中显示，只有当没有任何选择时才显示“Geen”（荷兰语，意为“无”）提示。

如何修复现有代码中两个函数内的if-else语句，使其能同时考虑两个下拉框的状态，实现正确的逻辑？我自己尝试过修改，但大多是猜测。

原代码

JavaScript

function print1SelectCheck(nameSelect)
{
    if(nameSelect){
        print1Option1Value = document.getElementById("13x19namiddag").value;
        print1Option2Value = document.getElementById("20x30namiddag").value;
        print1Option3Value = document.getElementById("30x45namiddag").value;
        if(print1Option1Value == nameSelect.value){
            document.getElementById("13x19namiddagdiv").style.display = "flex";
        }
        else{
            document.getElementById("13x19namiddagdiv").style.display = "none";
        }
        if(print1Option2Value == nameSelect.value){
            document.getElementById("20x30namiddagdiv").style.display = "flex";
        }
        else{
            document.getElementById("20x30namiddagdiv").style.display = "none";
        }
        if(print1Option3Value == nameSelect.value){
            document.getElementById("30x45namiddagdiv").style.display = "flex";
        }
        else{
            document.getElementById("30x45namiddagdiv").style.display = "none";
        }
        if(print1Option1Value == nameSelect.value || print1Option2Value == nameSelect.value || print1Option3Value == nameSelect.value){
            document.getElementById("Item-cart-none").style.display = "none";
        }
        else{
            document.getElementById("Item-cart-none").style.display = "flex";
        }
    }
    else{
        document.getElementById("13x19namiddagdiv").style.display = "none";
        document.getElementById("20x30namiddagdiv").style.display = "none";
        document.getElementById("30x45namiddagdiv").style.display = "none";
        document.getElementById("Item-cart-none").style.display = "flex";
    }
}

function print2SelectCheck(nameSelect)
{
    if(nameSelect){
        print2Option1Value = document.getElementById("13x19onderweg").value;
        print2Option2Value = document.getElementById("20x30onderweg").value;
        print2Option3Value = document.getElementById("30x45onderweg").value;
        if(print1Option1Value == nameSelect.value){
            document.getElementById("13x19onderwegdiv").style.display = "flex";
        }
        else{
            document.getElementById("13x19onderwegdiv").style.display = "none";
        }
        if(print2Option2Value == nameSelect.value){
            document.getElementById("20x30onderwegdiv").style.display = "flex";
        }
        else{
            document.getElementById("20x30onderwegdiv").style.display = "none";
        }
        if(print2Option3Value == nameSelect.value){
            document.getElementById("30x45onderwegdiv").style.display = "flex";
        }
        else{
            document.getElementById("30x45onderwegdiv").style.display = "none";
        }
        if(print2Option1Value == nameSelect.value || print2Option2Value == nameSelect.value || print2Option3Value == nameSelect.value){
            document.getElementById("Item-cart-none").style.display = "none";
        }
        else{
            document.getElementById("Item-cart-none").style.display = "flex";
        }
    }
    else{
        document.getElementById("13x19onderwegdiv").style.display = "none";
        document.getElementById("20x30onderwegdiv").style.display = "none";
        document.getElementById("30x45onderwegdiv").style.display = "none";
        document.getElementById("Item-cart-none").style.display = "flex";
    }
}

CSS

.item-cart {
  display: none;
  min-width: 100%;
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  align-items: center;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: hsla(0, 0.00%, 3.92%, 1.00);
  color: #e6e6e6;
}

.item-cart-image {
  height: 50px;
}

.small-text {
  position: relative;
  z-index: 10;
  font-weight: 400;
  font-size: 1rem;
}

.item-cart-none {
  display: flex;
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  align-items: center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: hsla(0, 0.00%, 3.92%, 1.00);
  color: #e6e6e6;
}

HTML

<select id="Namiddag" name="Namiddag" data-name="Namiddag" class="select-field w-select" onchange="print1SelectCheck(this);">
<option value="Formaat">Selecteer formaat en bekijk prijzen</option>
<option id="13x19namiddag" value="13x19 cm / €12,50">13x19 cm / €12,50</option>
<option id="20x30namiddag" value="20x30 cm / €22,50">20x30 cm / €22,50</option>
<option id="30x45namiddag" value="30x45 cm / €32,50">30x45 cm / €32,50</option>
<option value="geen">geen</option>
</select>

<select id="Onderweg" name="Onderweg" data-name="Onderweg" class="select-field w-select" onchange="print2SelectCheck(this);">
<option value="Formaat">Selecteer formaat en bekijk prijzen</option>
<option id="13x19onderweg" value="13x19 cm / €12,50">13x19 cm / €12,50</option>
<option id="20x30onderweg" value="20x30 cm / €22,50">20x30 cm / €22,50</option>
<option id="30x45onderweg" value="30x45 cm / €32,50">30x45 cm / €32,50</option>
<option value="geen">geen</option>
</select>

<span id="Item-cart-none" class="item-cart-none">Geen</span>

<div id="13x19namiddagdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span class="small-text">Afternoon - 13x19 cm / €12,50</span></div>

<div id="20x30namiddagdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span class="small-text">Afternoon - 20x30 cm / €22,50</span></div>

<div id="30x45namiddagdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4159b8d59a5cd322e5a8_film-photography-afternoon-silvan-soeters.jpg" alt="Afternoon"><span class="small-text">Afternoon - 30x45 cm / €32,50</span></div>

<div id="13x19onderwegdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span class="small-text">Commute - 13x19 cm / €12,50</span></div>

<div id="20x30onderwegdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span class="small-text">Commute - 20x30 cm / €22,50</span></div>

<div id="30x45onderwegdiv" class="item-cart"><img class="item-cart-image" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62af4158450de16f13120983_film-photography-commute-silvan-soeters.jpg" alt="Commute"><span class="small-text">Commute - 30x45 cm / €32,50</span></div>

修复方案

问题根源是原代码中每个下拉框的处理函数只判断自身状态，完全忽略另一个下拉框的选择情况，导致切换其中一个到“geen”时，直接显示空提示，不管另一个是否选了有效尺寸。

我们把逻辑拆分成两部分：

处理单个下拉框对应购物车项的显示/隐藏；
单独写函数检查两个下拉框的整体状态，决定是否显示空提示。

修改后的JavaScript代码：

// 处理第一个下拉框的选项切换
function print1SelectCheck(nameSelect) {
    const print1Option1Value = document.getElementById("13x19namiddag").value;
    const print1Option2Value = document.getElementById("20x30namiddag").value;
    const print1Option3Value = document.getElementById("30x45namiddag").value;

    // 控制对应div的显示/隐藏
    document.getElementById("13x19namiddagdiv").style.display = nameSelect.value === print1Option1Value ? "flex" : "none";
    document.getElementById("20x30namiddagdiv").style.display = nameSelect.value === print1Option2Value ? "flex" : "none";
    document.getElementById("30x45namiddagdiv").style.display = nameSelect.value === print1Option3Value ? "flex" : "none";

    // 每次切换后检查整体状态，更新空提示
    updateCartNoneDisplay();
}

// 处理第二个下拉框的选项切换
function print2SelectCheck(nameSelect) {
    const print2Option1Value = document.getElementById("13x19onderweg").value;
    const print2Option2Value = document.getElementById("20x30onderweg").value;
    const print2Option3Value = document.getElementById("30x45onderweg").value;

    // 修复原代码中的笔误，控制对应div的显示/隐藏
    document.getElementById("13x19onderwegdiv").style.display = nameSelect.value === print2Option1Value ? "flex" : "none";
    document.getElementById("20x30onderwegdiv").style.display = nameSelect.value === print2Option2Value ? "flex" : "none";
    document.getElementById("30x45onderwegdiv").style.display = nameSelect.value === print2Option3Value ? "flex" : "none";

    // 每次切换后检查整体状态，更新空提示
    updateCartNoneDisplay();
}

// 检查两个下拉框的状态，决定是否显示空提示
function updateCartNoneDisplay() {
    const select1 = document.getElementById("Namiddag");
    const select2 = document.getElementById("Onderweg");
    const cartNone = document.getElementById("Item-cart-none");

    // 定义有效选项：不是默认的"Formaat"，也不是"geen"
    const isSelect1Valid = select1.value !== "Formaat" && select1.value !== "geen";
    const isSelect2Valid = select2.value !== "Formaat" && select2.value !== "geen";

    // 只有当两个都无效时，才显示空提示
    cartNone.style.display = (!isSelect1Valid && !isSelect2Valid) ? "flex" : "none";
}

修改说明

拆分逻辑：把控制空提示的逻辑抽成独立函数updateCartNoneDisplay，每次下拉框变化时调用，确保同时考虑两个下拉框的状态；
修复笔误：原print2SelectCheck函数中判断第一个选项时误用了print1Option1Value，改为print2Option1Value；
简化代码：用三元运算符简化显示/隐藏的判断逻辑；
明确有效状态：定义有效选项为既非默认提示项也非“geen”，只要有一个下拉框选了有效选项，就隐藏空提示。

修改后即可实现需求：只有当两个下拉框都未选择有效尺寸（默认提示或“geen”）时，才显示“Geen”提示，否则隐藏。

内容的提问来源于stack exchange，提问作者user16358489

JavaScript函数if-else执行异常，购物车显示逻辑修复求助

原代码 #

JavaScript #

CSS #

HTML #

修复方案 #

修改说明 #

原代码

JavaScript

CSS

HTML

修复方案

修改说明