update html table when dropdown value change

From json i need to update the table based on month and year from javascript.

Any approach is fine for me

For reference i have created the FIDDLEbut it is not complete yet, just want to show the real environment

link: :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 Table

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

Jquery - i have used 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"
      }
    ]
  }
]