javascript - 下拉值更改时更新 html 表

Question

我需要根据 json 从 javascript 根据月份和年份更新表格。

任何方法都适合我

作为引用，我已经创建了FIDDLE但它还没有完成，只是想展示真实的环境

链接::http://jsfiddle.net/qytdu1zs/1/

HTML

<div class="dropdown">
    <select name="one" class="dropdown-select">
    <option value="">Select Year</option>
    <option value="0">2014</option>
    <option value="1">2013</option>
    <option value="2">2012</option>
    </select>           
</div>


<div class="dropdown ">
    <select name="two" class="dropdown-select">
    <option value="">Select Month</option>
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
    </select>           
</div>

html表格

<div id="example1"></div>

Jquery - 我用过 mustache.js

    $.ajax({
    url : 'data/front_finance.json',
    dataType : 'json',
    success : function (json) {

        var customer = $('#example1').columns({
                data : json,
                schema : [{
                        "header" : "ID",
                        "key" : "id",
                        "template" : "{{id}}"
                    }, {
                        "header" : "Name",
                        "key" : "name",
                        "template" : '<a href="#" onclick="javascript:ShowDialog(this.id);return false;" id="{{name}}" class="topopup">{{name}}</a>'
                    }, {
                        "header" : "Actual",
                        "key" : "actual"
                    }, {
                        "header" : "Target",
                        "key" : "target"
                    }, {
                        "header" : "Status",
                        "key" : "status",
                        "template" : "<img src ='{{status}}' alt='{{status}}'></img>"
                    }, {
                        "header" : "Trend",
                        "key" : "trend",
                        "template" : "<img src ='{{trend}}' alt='{{trend}}'></img>"
                    }
                ]
            });
    }
});

JSON

[
  {
    "year": "2013",
    "jan": [
      {
        "id": 1,
        "name": "data",
        "actual": "17",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "Feb": [
      {
        "id": 2,
        "name": "data1",
        "actual": "10",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "March": [
      {
        "id": 3,
        "name": "data2",
        "actual": "34",
        "target": "19",
        "status": "green",
        "trend": "down"
      }
    ]
  },
  {
    "year": "2014",
    "jan": [
      {
        "id": 1,
        "name": "data",
        "actual": "17",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "Feb": [
      {
        "id": 2,
        "name": "data1",
        "actual": "10",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "March": [
      {
        "id": 3,
        "name": "data2",
        "actual": "34",
        "target": "19",
        "status": "green",
        "trend": "down"
      }
    ]
  }
]

Answer 1

新 fiddle FIDDLE

$(document).ready(function (){
cloneObj= $("#example1").clone(); 
$('select[name=one]').on('change', function() {
    var selectedYear=($("option:selected", this).text());
    if (selectedYear!="Select Year"){

    for (var a in data){

        if(data[a].year==selectedYear){

            objMonth=data[a];

            return false;
        }
         }
    }else{
    objMonth=null;
    }
});
$('select[name=two]').on('change', function() {
var selectedYear=($("option:selected",  $('select[name=one]')).text());
    if (selectedYear!="Select Year"){
         var selectedMonth=($("option:selected", this).text());
        var jsonValue=objMonth[MonthMap[selectedMonth]];
        $("#example1").replaceWith(cloneObj.clone());

        $('#example1').columns({ data : jsonValue});    
    }else{
    alert("Please Select year please");
    }
});
});