可以通过以下步骤实现:
下面是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>循环遍历DIVs并获取值</title>
</head>
<body>
<div>
<input type="text" id="input1" value="Value 1">
<select id="select1">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
<div>
<input type="text" id="input2" value="Value 2">
<select id="select2">
<option value="Option A">Option A</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
</select>
</div>
<div>
<input type="text" id="input3" value="Value 3">
<select id="select3">
<option value="Option X">Option X</option>
<option value="Option Y">Option Y</option>
<option value="Option Z">Option Z</option>
</select>
</div>
<script>
var divs = document.querySelectorAll('div');
var values = [];
divs.forEach(function(div) {
var input = div.querySelector('input');
var select = div.querySelector('select');
var inputValue = input.value;
var selectValue = select.value;
values.push({
inputValue: inputValue,
selectValue: selectValue
});
});
console.log(values);
</script>
</body>
</html>
在上述示例代码中,我们创建了一个包含三个DIV元素的页面,每个DIV元素中包含一个文本框和一个下拉列表。通过循环遍历DIV元素,并使用querySelector方法获取每个DIV元素中的文本框和下拉列表,然后获取它们的值,并将值存储到一个数组中。最后,我们通过console.log输出数组的值。
这种方式可以用于从多个DIV元素中获取值,适用于需要批量处理或提交多个表单元素的场景。对于更复杂的需求,可以根据具体情况进行扩展和优化。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云