我有一個(gè)這樣的對(duì)象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 形式呈現(xiàn)。到目前為止，我能夠獲取標(biāo)簽和選擇列表，但無(wú)法獲取選擇列表中的選項(xiàng)，這是我到目前為止所嘗試的。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在這段代碼中使用函數(shù)。
2 回答
慕雪6442864
TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊
您的id屬性將導(dǎo)致錯(cuò)誤，因?yàn)槟鸀槊總€(gè)下拉列表分配相同的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>
呼喚遠(yuǎn)方
TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊
您可以使用如下循環(huán)：
for (key in data.values) {
output += '<option>' + data.values[key] + '</option>';
}示例： https: //jsfiddle.net/commanddotcom/j7f4y0kw/2/
- 2 回答
- 0 關(guān)注
- 161 瀏覽
添加回答
舉報(bào)
0/150
提交
取消