使用JSON填充列表框是一种常见的前端开发任务,可以通过以下步骤来实现:
fetch('data.json')
.then(response => response.json())
.then(data => {
// 在这里处理获取到的JSON数据
})
.catch(error => {
console.error('Error:', error);
});
[
{ "id": 1, "name": "Item 1" },
{ "id": 2, "name": "Item 2" },
{ "id": 3, "name": "Item 3" }
]
可以使用以下代码将数据填充到列表框中:
fetch('data.json')
.then(response => response.json())
.then(data => {
const listBox = document.getElementById('listBox'); // 假设列表框的id为listBox
data.forEach(item => {
const option = document.createElement('option');
option.value = item.id;
option.text = item.name;
listBox.appendChild(option);
});
})
.catch(error => {
console.error('Error:', error);
});
这段代码会将每个JSON对象中的id作为选项的值,将name作为选项的显示文本,然后将选项添加到列表框中。
领取专属 10元无门槛券
手把手带您无忧上云