Question

我正在尝试根据所选选项显示数据。下面是代码。 Dropbox中填充了name = "John","Damon","Patrick" and "Mark"。现在根据选择我想显示相应的相关数据。例如，如果我从选项中选择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"
    }

{ “名字”：“帕特里克”， “点”：53421， “颜色”：“＃DB4C3C”， “bullet”：“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 个答案: