js中获取数组中的对象后生成调查问卷表单
时间: 2024-02-12 22:05:08 浏览: 211
vue-draggable 生成调查问卷
好的,我可以为您提供一些思路。
首先,您需要定义一个包含对象的数组,每个对象代表一道题目,每个对象中包含题目的描述、选项、答案等信息。
然后,您可以使用JavaScript中的DOM操作来动态生成调查问卷表单。可以使用HTML中的表单元素来表示题目和选项,例如使用`<input>`元素来表示单选题的选项,使用`<textarea>`元素来表示问答题的答案。
具体的实现步骤如下:
1. 定义包含对象的数组,例如:
```javascript
var questions = [
{
title: '你最喜欢的动物是?',
type: 'radio',
options: ['狗', '猫', '兔子', '其他']
},
{
title: '你最喜欢的颜色是?',
type: 'radio',
options: ['红色', '蓝色', '绿色', '其他']
},
{
title: '你最喜欢的城市是?',
type: 'text'
}
];
```
2. 使用JavaScript中的DOM操作来动态生成表单,例如:
```javascript
// 获取表单容器元素
var formContainer = document.getElementById('form-container');
// 循环遍历问题数组,生成表单元素
for (var i = 0; i < questions.length; i++) {
// 创建问题容器元素
var questionContainer = document.createElement('div');
questionContainer.className = 'question';
// 创建问题标题元素
var questionTitle = document.createElement('h3');
questionTitle.textContent = questions[i].title;
questionContainer.appendChild(questionTitle);
// 创建选项元素
if (questions[i].type === 'radio') {
// 单选题
for (var j = 0; j < questions[i].options.length; j++) {
// 创建选项容器元素
var optionContainer = document.createElement('div');
optionContainer.className = 'option';
// 创建选项元素
var option = document.createElement('input');
option.type = 'radio';
option.name = 'question-' + i;
option.value = questions[i].options[j];
optionContainer.appendChild(option);
// 创建选项描述元素
var optionLabel = document.createElement('label');
optionLabel.textContent = questions[i].options[j];
optionContainer.appendChild(optionLabel);
// 添加选项容器元素到问题容器元素中
questionContainer.appendChild(optionContainer);
}
} else if (questions[i].type === 'text') {
// 问答题
var answer = document.createElement('textarea');
answer.name = 'question-' + i;
questionContainer.appendChild(answer);
}
// 添加问题容器元素到表单容器元素中
formContainer.appendChild(questionContainer);
}
```
这样就可以生成一个包含所有题目的调查问卷表单了。您可以根据实际需求对生成的表单进行样式和功能的调整。
阅读全文