在下拉列表中顯示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

這是香草Javascript中的解決方案。

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

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

JSF中鏡