如何在EJS中循环渲染Options 避免重复编写selected判断逻辑

原有写法问题 #

你当前的多分支else if写法存在两个明显的冗余问题：

• 每个判断分支都重复编写了全量的option标签代码，代码重复率高
• 后续新增尺寸选项时，既要补充新的option代码，还要新增对应的else if分支，维护成本高，很容易漏改导致选中逻辑失效

另外注意你原有代码里的标签名写错了，标准HTML下拉选项标签是<option>，不是<options>。

优化实现思路 #

核心思路是把可变的尺寸选项抽离为统一的配置数组，通过循环渲染所有选项，渲染过程中直接判断当前选项值和选中值是否匹配，动态添加selected属性即可，不需要为每个选项单独写判断分支。

实现代码 #

你可以直接在EJS模板中定义选项配置，也可以在后端渲染模板时把配置作为变量传入，两种方式的渲染逻辑完全一致：

<%
// 尺寸选项配置，后续新增尺寸只需要往数组中追加对象即可
const sizeOptions = [
  { value: 's', label: 'Small' },
  { value: 'm', label: 'Medium' },
  { value: 'l', label: 'Large' }
]
%>

<!-- 下拉框外层select标签不要漏写 -->
<select name="size">
  <% sizeOptions.forEach(option => { %>
    <option 
      value="<%= option.value %>"
      <%= size === option.value ? 'selected' : '' %>
    >
      <%= option.label %>
    </option>
  <% }) %>
</select>

注：三元表达式判断不匹配时输出空字符串，会在标签内留下少量空白，属于正常情况，浏览器解析HTML时会自动忽略，不会影响下拉框的选中功能。

如果要做数据和视图分离，直接把配置放到后端渲染逻辑里即可，以Express框架为例：

// 后端路由渲染逻辑
res.render('product-page', {
  size: currentSelectedSize, // 业务逻辑中拿到的当前选中尺寸值
  sizeOptions: [
    { value: 's', label: 'Small' },
    { value: 'm', label: 'Medium' },
    { value: 'l', label: 'Large' }
  ]
})

模板里不需要再重复定义sizeOptions，直接遍历传入的变量即可。

优化收益 #

• 所有option标签只需要编写一次，彻底消除重复代码
• 新增尺寸选项时，只需要在配置数组中追加对应的配置项，不需要修改任何渲染判断逻辑
• 选中逻辑统一处理，不会出现多分支漏改导致的选中状态异常问题

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