本文教你如何用 javascript 动态渲染问卷题目及可变数量的选项，摆脱硬编码 `

` 标签的限制，灵活支持 2、3、5 或任意 n 个答案选项。

在构建网页问卷时，若每个问题的选项数量不固定（例如有的题有 2 个选项，有的有 5 个），继续沿用 first/second/third/fourth 这类解构赋值方式不仅冗余，还会导致扩展性差、易出错。正确做法是将选项视为一个数组，并通过循环动态生成 HTML 列表项。

以下是推荐的实现方式（已修正原答案中的逻辑错误）：

// ✅ 正确示例：遍历 questions[count].options（而非 .question！）
const options = questions[count].options; // 假设 options 是字符串数组，如 ['是', '否'] 或 ['A', 'B', 'C', 'D', 'E']
let html = `<h2>Q${count + 1}. ${questions[count].question}</h2>
<ul class="option_group">`;

for (let option of options) {
  html += `<li class="option">${escapeHtml(option)}</li>`;
}

html += '</ul>';
question.innerHTML = html;

⚠️ 注意：原答案中误写为 questions[count].question（应为 .options），这是常见笔误，请务必核对数据结构。典型问卷数据格式如下：

const questions = [
  {
    question: "您是否满意当前服务？",
    options: ["非常满意", "满意", "一般", "不满意"]
  },
  {
    question: "请选择您的年龄段",
    options: ["18岁以下", "18–25岁", "26–35岁", "36–45岁", "46岁以上"]
  }
];

? 安全提示：为防止 XSS 攻击，建议对用户输入的选项内容做 HTML 转义（如使用 escapeHtml() 函数）：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

立即学习“Java免费学习笔记（深入）”；

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&")
    .replace(/</g, "<")
    .replace(/>/g, ">")
    .replace(/"/g, """)
    .replace(/'/g, "&#039;");
}

✅ 优势总结：

• ✅ 完全适配任意长度的 options 数组；
• ✅ 无需修改模板代码即可增减选项；
• ✅ 易于与事件委托结合，统一处理选项点击逻辑；
• ✅ 语义清晰，符合现代 JavaScript 编程习惯。

从此，你的问卷系统真正具备了“一题多态”的灵活性——无论选项是 2 个还是 20 个，HTML 都能自动生成、安全可靠。