过滤json数据并在网格中显示数据

时间:2012-11-12 05:15:46

标签: javascript jquery html

这是json。我在选择框中显示年份和制作。当我选择一年并使其相关数据应过滤并显示在网格中时。例如,当我选择2010并定义相关数据,即2010年。 def,300&应该在网格中显示5000。任何人都可以使用任何jquery插件帮助我完成这项工作。

var data = [
    { Year: "2011", Make: "abc", Model: "100", SubModel: "5000", },
    { Year: "2011", Make: "abc", Model: "200", SubModel: "6000",  },
    { Year: "2010", Make: "def", Model: "300", SubModel: "5000",  },
    { Year: "2011", Make: "def", Model: "100", SubModel: "1000",  }
];

这是我的代码:http://jsfiddle.net/qK2A3/2/

3 个答案:

答案 0 :(得分:1)

对我的问题

function getRelated() {
        $.each(g_Vehicle, function (index) {
            var sMake = g_Vehicle[index].Make;
            if (g_Vehicle[index].Make == $('#DropDown_Make').val() && g_Vehicle[index].Year == $('#DropDown_Year').val()) {
                $(".ModelClass").html(g_Vehicle[index].Model);
                $(".SubModelClass").html(g_Vehicle[index].SubModel);
            }
        });
    };

DEMO:http://jsfiddle.net/ybT7a/ 它正在发挥作用。

答案 1 :(得分:0)

你可以这样试试。

HTML代码:

<select class="target">
  <option value="2010" >2010</option>
  <option value="2011">2011</option>
</select>

JAVASCRIPT CODE:

$('.target').change(function() {
  var selected_value = $(this).val();
  jQuery.each(data[0] ,function(key,val){
     if(val.Year == selected_value){
         //code to add to grid go here
     }
  })
});

答案 2 :(得分:0)

你需要遍历对象数组,找到匹配年份的对象并使用该对象来解析一些html。可以用不同的方式做到这一点,我使用数组实用程序方法$.grep来执行数组的循环。请注意,demo必须从发布的数据数组中的对象中删除尾随逗号。 IE讨厌尾随逗号并且会破坏。

var year = /*your code to retrieve year*/  2010;/* test value*/
var make= /*your code to retrieve year*/ 'def';/* test value*/

var obj=$.grep( data, function(item, idx){
    return item.Year == year && item.Make == make;
})[0];

/* create some html from the object that matches year and make*/

$('body').append('<p>Model: '+ obj.Model +', SubModel: '+obj.SubModel+'</p>');

DEMO:http://jsfiddle.net/uPEQ7/

$.grep http://api.jquery.com/jQuery.grep/

的API参考