在下拉列表中显示json数据

Question

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

这是我正在使用的，

[
    Object { product_id="42", name="Apple Cinema 30""}, 
    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"}
]

Answer 1

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

var obj=[
  {
    "product_id": 42,
    "name": "Apple Cinema 30""
  },
  {
    "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"
  }
]

html代码：

<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);

小提琴：http://jsfiddle.net/ff0L3y2r/2/

Answer 2

以下是vanilla Javascript中的解决方案。

＆＃13;

＆＃13;

var strJson = "[{\"product_id\": \"42\",\"name\": \"Apple Cinema 30"\"},{\"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
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JSFiddle mirror