我有一个这样的对象var Blocks = { "name": "Column", "properties": [ { "name": "mainAxisAlignment", "type":"dropDown", "values":[ "center", "end", "spaceAround", "spaceBetween", "spaceEvenly", "start" ] }, { "name": "crossAxisAlignment", "type":"dropDown", "values":[ "baseline", "center", "end", "start", "stretch" ] }, { "name":"direction", "type": "string" }, { "name":"hashCode", "type": "string" }, { "name":"key", "type": "string" }, { "name": "mainAxisSize", "type":"dropDown", "values":[ "max", "min" ] }, { "name":"textBaseline", "type": "string" }, ],}我正在尝试以 html 形式呈现。到目前为止，我能够获取标签和选择列表，但无法获取选择列表中的选项，这是我到目前为止所尝试的。document.getElementById('test1').innerHTML = `<div><div>${Blocks.name}</div><div id='selection'></div></div>`document.getElementById('selection').innerHTML = Blocks.properties.map(user => { switch (user.type) { case 'dropDown': return propertyDropdown(user) case 'string': return propertyString(user) default: break; }}).join('')function propertyString(data) { return `<div style="margin-left: 18px"> <label>${data.name}: </label> </div>`};function propertyDropdown(data) { return `<div style="margin-left: 18px"> <label for="property">${data.name}: </label> <select id="property"> </select> </div>`};这是我得到的输出https://i.stack.imgur.com/EwU6R.png 我不知道如何createOptions在这段代码中使用函数。
2 回答
慕雪6442864
TA贡献1812条经验 获得超5个赞
您的id属性将导致错误，因为您为每个下拉列表分配相同的ID。在这种情况下，您可以使用name属性作为 ID。
var Blocks={name:"Column",properties:[{name:"mainAxisAlignment",type:"dropDown",values:["center","end","spaceAround","spaceBetween","spaceEvenly","start"]},{name:"crossAxisAlignment",type:"dropDown",values:["baseline","center","end","start","stretch"]},{name:"direction",type:"string"},{name:"hashCode",type:"string"},{name:"key",type:"string"},{name:"mainAxisSize",type:"dropDown",values:["max","min"]},{name:"textBaseline",type:"string"}]};
document.getElementById('test1').innerHTML = `<div>
<div>${Blocks.name}</div>
<div id='selection'></div>
</div>`
document.getElementById('selection').innerHTML = Blocks.properties.map(user => {
switch (user.type) {
case 'dropDown':
return propertyDropdown(user)
case 'string':
return propertyString(user)
default:
break;
}
}).join('')
function propertyString(data) {
return `<div style="margin-left: 18px">
<label>${data.name}: </label>
</div>`
};
function propertyDropdown(data) {
const options = data.values.map(opt => createOptions(opt)).join('')
return `<div style="margin-left: 18px">
<label for="${data.name}">${data.name}: </label>
<select id="${data.name}">
${options}
</select>
</div>`
};
function createOptions(option) {
return `<option value="${option}">${option}</option>`
}
<div id="test1"></div>
呼唤远方
TA贡献1856条经验 获得超11个赞
您可以使用如下循环：
for (key in data.values) {
output += '<option>' + data.values[key] + '</option>';
}示例： https: //jsfiddle.net/commanddotcom/j7f4y0kw/2/
- 2 回答
- 0 关注
- 84 浏览
添加回答
举报
0/150
提交
取消