将这个json文件动态加载入HTML的option中。json文件{ "problem_categories": [ { "name": "产品质量问题", "id": 1, "description": "客户反映产品质量有问题,无法正常使用或有明显缺陷" }, { "name": "服务态度问题", "id": 2, "description": "客户投诉服务人员态度不友好或存在其他不专业问题" }, { "name": "交付时间问题", "id": 3, "description": "客户反馈交付时间不准确或延迟,影响下一步工作计划" }, { "name": "其他", "id": 4, "description": "客户反馈的问题不属于以上三种类型" } ] }
时间: 2023-05-24 12:05:20 浏览: 106
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Dropdown from JSON</title>
</head>
<body>
<label for="category">Problem Category: </label>
<select id="category">
<option value="">Select a category</option>
</select>
<script>
const selectCategory = document.querySelector('#category');
fetch('problem_categories.json')
.then(response => response.json())
.then(json => {
json.problem_categories.forEach(category => {
const option = document.createElement('option');
option.value = category.id;
option.textContent = category.name;
selectCategory.appendChild(option);
});
})
.catch(error => console.log(error));
</script>
</body>
</html>
相关问题
HTML的option 的ID 为problem_category动态加载problem_categories.json列表下的name数据
可以使用JavaScript动态创建select和option元素,并设置对应的属性和值。具体代码如下:
HTML:
```
<select id="problem_category"></select>
```
JavaScript:
```
// 加载problem_categories.json文件,此处假定已经通过ajax获取到json数据,存储在变量problemCategories中
var problemCategories = [
{
"id": 1,
"name": "问题分类1"
},
{
"id": 2,
"name": "问题分类2"
},
{
"id": 3,
"name": "问题分类3"
}
];
// 获取select元素
var select = document.getElementById("problem_category");
// 动态创建option元素,并添加到select中
for (var i = 0; i < problemCategories.length; i++) {
var option = document.createElement("option");
option.text = problemCategories[i].name;
option.value = problemCategories[i].id;
select.add(option);
}
```
这样就可以根据problem_categories.json文件中的name数据动态创建选择框中的选项。
如何讲这段json文件内的name 读入HTML的option中。json文件内容如下:{ "problem_categories": [ {"name": "产品质量问题", "id": 1,"description": "客户反映产品质量有问题,无法正常使用或有明显缺陷"}, {"name": "服务态度问题", "id": 2,"description": "客户投诉服务人员态度不友好或存在其他不专业问题"}, {"name": "交付时间问题", "id": 3,"description": "客户反馈交付时间不准确或延迟,影响下一步工作计划"}, {"name": "其他", "id": 4,"description": "客户反馈的问题不属于以上三种类型"} ]}
可以通过以下代码将json文件内的name读入HTML的option中:
```
<select>
<option disabled selected>请选择问题类型</option>
<script>
const problemCategories = JSON.parse('{ "problem_categories": [{"name": "产品质量问题", "id": 1,"description": "客户反映产品质量有问题,无法正常使用或有明显缺陷"},{"name": "服务态度问题", "id": 2,"description": "客户投诉服务人员态度不友好或存在其他不专业问题"},{"name": "交付时间问题", "id": 3,"description": "客户反馈交付时间不准确或延迟,影响下一步工作计划"},{"name": "其他", "id": 4,"description": "客户反馈的问题不属于以上三种类型"} ]}');
for (const problemCategory of problemCategories.problem_categories) {
document.write(`<option value="${problemCategory.id}">${problemCategory.name}</option>`);
}
</script>
</select>
```
这段代码会将json文件内的四种问题类型的name值分别写入HTML中的四个option标签的value属性中,并显示在下拉框中。用户可以根据问题类型选择其中一种。
阅读全文