如何在NodeJS+EJS环境下实现select下拉框选项随前序分类联动？

实现思路 #

• 提前定义各分类对应的尺码映射关系
• 用原生JS监听分类下拉框的change事件
• 分类切换时动态清空并重建尺码下拉框的选项

无需引入jQuery，所有逻辑用原生JS即可实现，和你当前的EJS技术栈完全兼容。

完整代码示例 #

<!-- 原有分类下拉框，补充sweatshirts的value值，修正ID避免和class重名 -->
<div>
  <select id='categorySelect' name='category'>
    <option disabled selected>Category</option>
    <option value='shoes'>Championes</option>
    <option value='shirts'>Camiseta</option>
    <option value='sweatshirts'>sweatshirts</option>
    <option value='others'>Otro</option>
  </select>
</div>
<div class='inputStyle'>
  <label for='size'> Size </label>
  <br>
  <!-- 初始状态禁用尺码框，引导用户先选分类 -->
  <select id='size' name='size' disabled>
    <option value="">请先选择分类</option>
  </select>
</div>

<!-- 原生JS逻辑，直接放在页面body末尾即可 -->
<script>
// 1. 定义分类和尺码的映射关系，可根据需求自行增删调整
const sizeMap = {
  shoes: [33,34,35,36,37,38,39,40,41,42,43,44,45,46],
  shirts: ['S','M','L','XL','XXL','XXXL'],
  sweatshirts: ['S','M','L','XL','XXL','XXXL'],
  others: ['自定义尺寸']
}

// 2. 获取两个下拉框的DOM元素
const categorySelect = document.getElementById('categorySelect')
const sizeSelect = document.getElementById('size')

// 3. 监听分类切换事件
categorySelect.addEventListener('change', function() {
  const selectedCategory = this.value
  // 清空原有尺码选项
  sizeSelect.innerHTML = ''
  
  // 未选择有效分类时保持尺码框禁用
  if (!selectedCategory) {
    sizeSelect.disabled = true
    sizeSelect.innerHTML = `<option value="">请先选择分类</option>`
    return
  }

  // 启用尺码框，生成对应选项
  sizeSelect.disabled = false
  const sizeList = sizeMap[selectedCategory]
  sizeList.forEach(size => {
    const option = document.createElement('option')
    option.value = size
    option.textContent = size
    sizeSelect.appendChild(option)
  })
})
</script>

EJS优化建议（可选） #

如果需要从后端统一维护尺码规则，不需要前端写死映射表，可以在NodeJS路由中将尺码配置传递给EJS模板：

// NodeJS路由代码示例
app.get('/你的页面路由', (req, res) => {
  const sizeMap = {
    shoes: [33,34,35,36,37,38,39,40,41,42,43,44,45,46],
    shirts: ['S','M','L','XL','XXL','XXXL'],
    sweatshirts: ['S','M','L','XL','XXL','XXXL'],
    others: ['自定义尺寸']
  }
  res.render('你的EJS文件名', { sizeMap })
})

之后在EJS模板的JS部分替换映射表定义即可，后端修改尺码规则后前端自动同步：

const sizeMap = <%- JSON.stringify(sizeMap) %>

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