,可以通过以下步骤实现:
Json.Encode()
方法将C#对象转换为JSON字符串,并将其传递给前端。JSON.parse()
方法将JSON字符串转换为JavaScript对象。for...in
循环或Array.forEach()
方法来遍历JSON数据。<option>
元素,并将其添加到下拉菜单中。可以使用document.createElement()
方法创建新的元素,并使用appendChild()
方法将其添加到下拉菜单中。innerText
属性设置选项的显示文本,使用value
属性设置选项的值。下面是一个示例代码:
@{
var jsonData = new {
category1 = new[] { "item1", "item2", "item3" },
category2 = new[] { "item4", "item5", "item6" },
category3 = new[] { "item7", "item8", "item9" }
};
var jsonString = Json.Encode(jsonData);
}
<script>
var jsonData = JSON.parse('@Html.Raw(jsonString)');
var dropdown = document.createElement("select");
for (var category in jsonData) {
if (jsonData.hasOwnProperty(category)) {
var categoryOptions = jsonData[category];
categoryOptions.forEach(function (option) {
var optionElement = document.createElement("option");
optionElement.innerText = option;
optionElement.value = option;
dropdown.appendChild(optionElement);
});
}
}
document.body.appendChild(dropdown);
</script>
这个示例代码会根据嵌套的JSON数据创建一个下拉菜单,并将其添加到HTML页面中。用户可以在下拉菜单中选择不同的选项,以显示嵌套的JSON数据。
领取专属 10元无门槛券
手把手带您无忧上云