如何在选择框中显示json数据？

Question

{"BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria"} 

如何在html中使用javascript在选择框中显示此数据作为选项？

Answer 1

这是非常简单的，如果你使用Javascript。为此，

var countries = {"BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria"}; 
 
var selectHTML=''; 
 

 
for (var key in countries) 
 
{ 
 
    selectHTML +='<option value="'+key+'">'+countries[key]+'</option>'; 
 
} 
 
    
 
document.getElementById('countries').innerHTML = selectHTML;

<div id="select_box_wrapper"> 
 
    <select id="countries"></select> 
 
</div>

Answer 2

遍历您的阵列与各国的让利国家，并添加文本和价值的资讯提供给您选择下拉。文本将是诸如BE的缩写，并且值将是比利时。

Answer 3

这里有一种解决没有jQuery的问题，并且不附加HTML字符串的方法。我使用Option构造函数在下拉菜单中创建一个选项并将其插入到select元素中。

var data = {"BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria"}; 
 

 
var selectControl = document.getElementById("countries"); 
 

 
for(var prop in data) { 
 
    if(data.hasOwnProperty(prop)) { 
 
    var option = new Option(); 
 
    option.text = data[prop]; 
 
    option.value = prop; 
 
    selectControl.options[selectControl.options.length] = option; 
 
    } 
 
}

<select id="countries"> 
 
</select>