在下拉列表中显示 JSON 数据

show json data in dropdown list

本文关键字：JSON 数据显示下拉列表 | 更新日期: 2023-09-27

我正在开发一个产品级联下拉列表...我根据product_id返回了 json 结果，但我不知道如何在新的下拉列表框中填充/填充它......

这是我正在使用的，

[
    Object { product_id="42", name="Apple Cinema 30&quot;"}, 
    Object { product_id="41", name="iMac"}, 
    Object { product_id="40", name="iPhone"}, 
    Object { product_id="48", name="iPod Classic"}, 
    Object { product_id="36", name="iPod Nano"}, 
    Object { product_id="34", name="iPod Shuffle"}, 
    Object { product_id="32", name="iPod Touch"}, 
    Object { product_id="43", name="MacBook"}, 
    Object { product_id="44", name="MacBook Air"}, 
    Object { product_id="45", name="MacBook Pro"}
]

你的代码和json数据应该是这样的

var obj=[
  {
    "product_id": 42,
    "name": "Apple Cinema 30&quot;"
  },
  {
    "product_id": "41",
    "name": "iMac"
  },
  {
    "product_id": "40",
    "name": "iPhone"
  },
  {
    "product_id": "48",
    "name": "iPod Classic"
  },
  {
    "product_id": "36",
    "name": "iPod Nano"
  },
  {
    "product_id": "34",
    "name": "iPod Shuffle"
  },
  {
    "product_id": "32",
    "name": "iPod Touch"
  },
  {
    "product_id": "43",
    "name": "MacBook"
  },
  {
    "product_id": "44",
    "name": "MacBook Air"
  },
  {
    "product_id": "45",
    "name": "MacBook Pro"
  }
]

网页代码：

<div id="dd"></div>

jquery 代码：

  var objs=JSON.parse(obj);
  var dd = '<select name="dd" id="dd">'
    $.each(objs, function (index,item) {
        console.log(objs);
        dd += '<option value=' + item.product_id + '>' + item.name + '</option>';
    });
    dd+="</select>"
    $("#dd").html(dd);

fiddle：http：//jsfiddle.net/ff0L3y2r/2/

这是vanilla Javascript中的一个解决方案。

var strJson = "[{'"product_id'": '"42'",'"name'": '"Apple Cinema 30&quot;'"},{'"product_id'": '"41'",'"name'": '"iMac'"},{'"product_id'": '"40'",'"name'": '"iPhone'"},{'"product_id'": '"48'",'"name'": '"iPod Classic'"},{'"product_id'": '"36'",'"name'": '"iPod Nano'"},{'"product_id'": '"34'",'"name'": '"iPod Shuffle'"},{'"product_id'": '"32'",'"name'": '"iPod Touch'"},{'"product_id'": '"43'",'"name'": '"MacBook'"},{'"product_id'": '"44'",'"name'": '"MacBook Air'"},{'"product_id'": '"45'",'"name'": '"MacBook Pro'"}]";
/**
 * In the unlikley event that there was invalid JSON
 * We will not display an empty select input, but supply
 * an option "unavailable at the moment". JSON.parse() throws
 * an exception, so we can use this to our advantage.
 */
try {
   var options = JSON.parse(strJson); //Parse the JSON into objects
} catch(err) {
    var select_group = document.getElementById("options");
    var option = document.createElement("option");
    option.value = 0;
    option.innerHTML = "Unavailable at the moment";
    select_group.appendChild(option);
    console.log("Cannot parse JSON");
    console.log(err);
    return false;
}
var select_group = document.getElementById("options");
options.forEach(function(entry) { //Loop through 
    var option = document.createElement("option"); //Create an option node
    option.value = entry.property_id; //Add the value as the property_id
    option.innerHTML = entry.name; //Add the name (what is displayed to the end user in the option)
    select_group.appendChild(option); //Add it to the DOM
});

<select name="option" id="options">
</select>

show json data in dropdown list

JSFiddle mirror