Javascript JSON显示与所选选项相对应的数据

Question

我试图根据所选选项显示数据。 下面是代码。 下拉框填充了name = "John","Damon","Patrick" and "Mark" 。 现在，根据选择，我想显示相应的相关数据。 例如，如果我从选项中选择“标记”，则应将相应的数据"points": 13654,"color": "#DAF0FD","bullet": "3.gif"存储在数组或另一个JSON对象中。 最后，我需要绘制图形。 我有大约1000条记录。

<html>
  <head>

  <script type="text/javascript">
    window.onload = function () {

      select = document.getElementById("selector");
      var lookup = {};
      var items = chartData;
      //alert(items)
      for (var item, i = 0; item = items[i++];) {
        var name = item.name;
        if (!(name in lookup)) {
          lookup[name]=1;
          var option = document.createElement("option");
          option.value = i+1;
          option.textContent = name;
          select.appendChild(option);
        }; 
      };
    };        

    // note, each data item has "bullet" field.
    var chartData = [{
        "name": "John",
            "points": 35654,
            "color": "#7F8DA9",
        "bullet": "0.gif"
    }, {
        "name": "Damon",
            "points": 65456,
            "color": "#FEC514",
            "bullet": "1.gif"
    }, {
        "name": "Patrick",
            "points": 45724,
            "color": "#DB4C3C",
            "bullet": "2.gif"
    }, {
        "name": "Mark",
            "points": 13654,
            "color": "#DAF0FD",
            "bullet": "3.gif"
    }

{“名称”：“ Patrick”，“点”：53421，“颜色”：“＃DB4C3C”，“项目符号”：“ 2.gif”}，{“名称”：“标记”，“点”：12311， “ color”：“＃DAF0FD”，“ bullet”：“ 3.gif”}];

  </script>
</head>

<body>
  <div><select id="selector"><option value="99">Default</option></select></div>
  <div id="chartdiv" style="width: 100%; height: 600px;"></div>
</body>

Answer 1

这是解决方案jsfiddle ，我建议使用JQuery之类的东西来添加事件侦听器，否则，您需要在JS代码中单独处理IE。 我已使用下划线进行数据处理。

       // note, each data item has "bullet" field.
var chartData = [{
    "name": "John",
        "points": 35654,
        "color": "#7F8DA9",
        "bullet": "0.gif"
}, {
    "name": "John",
        "points": 35654,
        "color": "#7F8DA9",
        "bullet": "0.gif"
},{
    "name": "John",
        "points": 35654,
        "color": "#7F8DA9",
        "bullet": "0.gif"
},{
    "name": "Damon",
        "points": 65456,
        "color": "#FEC514",
        "bullet": "1.gif"
}, {
    "name": "Patrick",
        "points": 45724,
        "color": "#DB4C3C",
        "bullet": "2.gif"
},{
    "name": "Patrick",
        "points": 45724,
        "color": "#DB4C3C",
        "bullet": "2.gif"
},{
    "name": "Patrick",
        "points": 45724,
        "color": "#DB4C3C",
        "bullet": "2.gif"
},{
    "name": "Patrick",
        "points": 45724,
        "color": "#DB4C3C",
        "bullet": "2.gif"
}, {
    "name": "Mark",
        "points": 13654,
        "color": "#DAF0FD",
        "bullet": "3.gif"
}];


var select = document.getElementById("selector");
var lookup = {};


var uniqNames = _.unique(_.pluck(chartData, 'name'));
var len = uniqNames.length;

//alert(items)
for (var i = 0; i < len; i++) {
    var name = uniqNames[i];
    var option = document.createElement("option");
    option.value = name;
    option.textContent = name;
    select.appendChild(option);
};


select.addEventListener('change', function () {
    var selValue = select.options[select.selectedIndex].value;

    if (selValue === 'None') {
        return;
    }
    var selectedOptions = _.where(chartData, {name:selValue})
    alert(JSON.stringify(selectedOptions))

})

Javascript JSON显示与所选选项相对应的数据

问题描述

1 个解决方案

解决方案1
0 2013-12-26 14:22:43

Javascript JSON显示与所选选项相对应的数据

问题描述

1 个解决方案

解决方案1 0 2013-12-26 14:22:43

解决方案1
0 2013-12-26 14:22:43