在EJS文件中用JS变量控制select选项禁用时currentQty未定义问题

错误原因 #

你混淆了服务器端渲染（EJS）和客户端JavaScript的执行时机：

• EJS在页面发送到浏览器前就已经在服务器执行完毕，而currentQty是浏览器端的变量，服务器渲染时根本无法访问这个变量，所以直接在EJS模板里引用会报「未定义」错误。
• 原逻辑本身也有问题：遍历每个下拉选项时用同一个currentQty判断是否禁用，这不符合需求逻辑——要么每个选项根据自身的库存（variation.quantity）决定状态，要么选中某个选项后动态调整其他选项。

解决方案1：服务器端直接控制选项禁用（常规需求） #

如果你的需求是每个选项根据自身的库存决定是否禁用，直接在EJS里使用服务器端传入的variation.quantity判断即可：

<select name="variation" onchange="handleQuantity();" id="category" class="form-control">
<% item.variations.forEach(function(variation){ %>
    <% if(variation.quantity > 0) {%>
        <option value="<%= variation.name %>"><%= variation.name %></option>
    <% } else { %>
        <option value="<%= variation.name %>" disabled><%= variation.name %></option>
    <% } %>
<% }) %>
</select>

这种方式不需要依赖客户端变量，服务器渲染时直接完成选项的启用/禁用设置。

解决方案2：客户端动态控制选项状态（交互需求） #

如果你的需求是选中某个选项后，根据它的库存动态调整其他选项的禁用状态，先让EJS渲染所有选项，再用客户端JS处理：

1. 修改EJS代码（先渲染所有选项，不做服务器端禁用）：

<select name="variation" onchange="handleQuantity();" id="category" class="form-control">
<% item.variations.forEach(function(variation){ %>
    <option value="<%= variation.name %>"><%= variation.name %></option>
<% }) %>
</select>
<!-- 直接把服务器端的item数据注入到客户端JS，避免通过input解析 -->
<script>
const item = <%- JSON.stringify(item) %>;
</script>

2. 修改客户端JS代码：

function handleQuantity() {
    const categorySelect = document.getElementById('category');
    const selectedValue = categorySelect.value;
    const selectedVariation = item.variations.find(x => x.name === selectedValue);
    const currentQty = selectedVariation.quantity;

    // 示例逻辑：如果选中选项的库存<=0，禁用所有其他选项
    Array.from(categorySelect.options).forEach(option => {
        if (option.value !== selectedValue) {
            option.disabled = currentQty <= 0;
        }
    });
}

// 页面加载完成后执行一次初始化
window.addEventListener('load', handleQuantity);

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