javascript - 在 PHP 或 JS 中从 json 文件构建选择

Question

如何从这样的 json 文件中构建选择？

{
    "AF": "Afghanistan",
    "AL": "Albania",
    "DZ": "Algeria",
    "AS": "American Samoa",
    ...
}

我正在尝试做这样的事情:

<select>
  <option value="AF">Afghanistan</option>
  <option value="AL">Albania</option>
</select>

谢谢。

Answer 1

如果您使用 Javascript，则应该使用 Ajax 来获取 JSON 数据。然后假设我们已经有了数据“JSON”，您可以使用循环来处理它，例如:

var json_data = {
    "AF": "Afghanistan",
    "AL": "Albania",
    "DZ": "Algeria",
    "AS": "American Samoa"
};

var select = document.querySelector("#mySelect");

for(var countryCode in json_data){
   var option = new Option(json_data[countryCode], countryCode);
   select.appendChild(option);
}

<select id="mySelect"></select>

使用 jQuery:

jQuery 简化了您的工作，您拥有 jQuery.getJSON()从文件获取 JSON 数据的方法，以及 jQuery.each()用于处理对象

$.getJSON("https://raw.githubusercontent.com/tarraq/JSON-data-arrays/master/countries/english/countries-key-value.json", function(jsonData){
   var select = $("#mySelect");
   $.each(jsonData, function(key, country){
      select.append($("<option>", {value: key, text: country}))
   })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="mySelect"></select>