Wie zeige ich Json-Daten in der Auswahlbox an?

Question

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

Wie kann ich diese Daten als Optionen in Auswahlfeld in HTML mit Javascript anzeigen?

Answer 1

Es ist sehr einfach, wenn Sie mit Javascript verwenden. Tun Sie dies,

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

Iterate über das Array mit let Land Länder und fügen Sie Ihre Informationen als Text und den Wert Ihrer wählen Dropdown-Liste. Text wäre die Abkürzung wie BE und Wert wäre Belgien.

Answer 3

Hier ist eine Möglichkeit, das Problem ohne jQuery und ohne die HTML-Zeichenfolgen zu lösen. Ich verwende den Konstruktor Option, um eine Option im Dropdown-Menü zu erstellen und diese in das Element select einzufügen.

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>