所以现在我的页面中有以下内容:
其中由下拉菜单和输入文本字段组成。所以我想要的是从上面的 HTML 元素在 javascript 中创建一个 JSON 格式的对象，这样我会得到类似的东西:
myObj = {
Name: Jake,
Address: 51 Lake District
}
但是我现在使用的方法效率很低，如下所示:
var myObj = {
[document.getElementById("drop1").value]:document.getElementById("n_in").value,
[document.getElementById("drop2").value]:document.getElementById("a_in").value,
}
console.log(JSON.stringify(myObj))
我不完全确定这是否是一个好方法，但将来如果我要在 HTML 中添加另一组字段(例如“国家/地区”下拉列表)，我将不得不对另一个字段进行硬编码再次进入上面的变量。
这是一个好方法吗？
var myObj = {
[document.getElementById("drop1").value]:document.getElementById("n_in").value,
[document.getElementById("drop2").value]:document.getElementById("a_in").value,
}
console.log(JSON.stringify(myObj))<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="lst">
<div class = "ifield">
<select id = "drop1">
<option value = "Name">Name</option>
</select>
<input type = "text" id = "n_in" value = "Jake">
</div>
<div class = "ifield">
<select id = "drop2">
<option value = "Address">Address</option>
</select>
<input type = "text" id = "a_in" value = "51 Lake District">
</div>
</div>
<script src = "test.js"></script>
</body>
</body>
</html>最佳答案
您可以选择所有 .ifield 元素和 reduce()它们到一个对象:
const values = [...document.querySelectorAll('.ifield')].reduce((a, v) => {
a[v.querySelector('select').value] = v.querySelector('input').value;
return a;
}, {});
console.log(values);<div id="lst">
<div class="ifield">
<select id="drop1">
<option value="Name">Name</option>
</select>
<input type="text" id="n_in" value="Jake">
</div>
<div class="ifield">
<select id="drop2">
<option value="Address">Address</option>
</select>
<input type="text" id="a_in" value="51 Lake District">
</div>
</div>关于javascript - 在 javascript 中根据 HTML 元素值构建 JSON 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64851926/