Javascript填充選擇與JSON數據在ES6（不含jQuery）

我有一些數據在JSON格式，我想添加到我的選擇。Javascript填充選擇與JSON數據在ES6（不含jQuery）

下面是數據：

{ 
    "timezones": 
    { 
     "country": "Africa", 
     "tz": "Africa/Abidjan" 
    }, 
    { 
     "country": "America", 
     "tz": "America/Anguilla" 
    } 
}

這是當前選擇：

<select> 

    <optgroup label="Africa"> 
     <option value="Africa/Abidjan">Adak</option> 
    </optgroup> 

    <optgroup label="America"> 
     <option value="America/Adak">Anguilla</option> 
    </optgroup> 

</select>

我如何填充選擇從JSON數據，而不是硬而不jQuery的編碼呢？

來源

2017-10-09 max2020

您的對象拋出語法錯誤。 –

'timeszones'應該是一個數組，或者每個條目都應該有一個索引。 – JoeriShoeby

1.修正截至目前無效的數據/ JSON。 2.爲什麼''元素？會有多個條目嗎？ 3.'

您可以使用appendChild方法結合.forEach方法。

let obj={ 
 
    "timezones": 
 
    [{ 
 
     "country": "Africa", 
 
     "tz": "Africa/Abidjan" 
 
    }, 
 
    { 
 
     "country": "America", 
 
     "tz": "America/Anguilla" 
 
    }] 
 
}; 
 
let select=document.getElementById('countrySelect'); 
 
obj.timezones.forEach(function(item){ 
 
    let newOptGroup=document.createElement('optgroup'); 
 
    newOptGroup.label=item.country; 
 
    let option=document.createElement('option'); 
 
    option.value=item.tz; 
 
    option.text=item.tz; 
 
    newOptGroup.appendChild(option); 
 
    select.appendChild(newOptGroup); 
 
});

<select id="countrySelect"> 
 

 
</select>

來源

2017-10-09 09:54:21

文本與數值不同（並且根本沒有包含在數據/問題中） – Andreas

@Andreas，我知道，但我給OP解決方案如何創建他的選擇元素，這是主要部分。 –

起初，你是JSON數據是無效的。 '時區'應該是一個數組，或者每個對象都有一個索引。

數據

let data = { 
    "timezones": [ 
    { 
     "country": "Africa", 
     "tz": "Africa/Abidjan" 
    }, 
    { 
     "country": "America", 
     "tz": "America/Anguilla" 
    }] 
}

我會填充選項如下：

data.timeszones.forEach(function(timezone) { 
    let optionGroup = document.createElement('optgroup'); 
     optionGroup.setAttribute('label', timezone.country); 

    let option = document.createElement('option'); 
     option.setAttribute('value', timezone.tz); 

    optionGroup.appendChild(option); 
    document.getElementById('selectionList').appendChild(optionGroup); 
});

而且obvisously，不要忘了一個ID設置爲你的元素。

<select id='selectionList'> 
    <optgroup label="Africa"> 
     <option value="Africa/Abidjan">Adak</option> 
    </optgroup> 

    <optgroup label="America"> 
     <option value="America/Adak">Anguilla</option> 
    </optgroup> 
</select>

來源

2017-10-09 09:59:13 JoeriShoeby

Javascript填充選擇與JSON數據在ES6（不含jQuery）

回答

相關問題