Question

我正在尝试构建一个带有下拉列表的表单，该表单将使用jQuery查询json对象，然后根据在下拉列表中选择的内容在html页面上显示该数据及其数据。

这是我的json对象：

var obj = {
            "ProductOne":
            {
                "url":["http://www.google.com"],
                "map":["test-one"],
                "options":["test-one","test-three","test-four"],
                "dim":{
                    "bam":"5",
                    "tin":"4"
                },
                "acc":{
                    "bam":"1",
                    "tin":"2"
                }
            },
            "ProductTwo":
            {
                "url":["http://www.google-two.com"],
                "map":["test-two"],
                "options":["test-two","test-three","test-five"],
                "dim":{
                    "bam":"6",
                    "tin":"9"
                },
                "acc":{
                    "bam":"8",
                    "tin":"6"
                }
            }
        };

这是我的表格：

<form name="searchForm" id="searchForm">

        <select name="dim">
            <option value="" selected="">Select One</option>
            <option value="5">5</option>
            <option value="4">4</option>
            <option value="6">6</option>
            <option value="9">9</option>
        </select>
        <select name="acc">
            <option value="" selected="">Select One</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="6">6</option>
            <option value="8">8</option>
        </select>
        <select name="options">
            <option value="" selected="">Select One</option>
            <option value="test-one">Test One</option>
            <option value="test-two">Test Two</option>
            <option value="test-three">Test Three</option>
            <option value="test-four">Test Four</option>
            <option value="test-five">Test Five</option>
        </select>
        <input id="button" type="button" value="submit"/>
    </form>

Answer 1

你可以用这个过滤：

var filteredProducts = {},
    dim = $("select[name=dim]").val(),
    acc = $("select[name=acc]").val(),
    option = $("select[name=options]").val();

function valueInObject(object, value){
   for(var key in object){
      if(object[key] == value) return true;
   }
   return false;      
}

$.each(obj, function(key, product){
    if(
      (option == "" || $.inArray(option, product.options)) >= 0 && 
      (acc == "" || valueInObject(product.acc, acc)) &&
      (dim == "" || valueInObject(product.dim, dim))   
    ){
       filteredProducts[key] = product;
    }
});

console.log(filteredProducts);
alert(JSON.stringify(filteredProducts));

然后，您在filteredProducts对象中拥有过滤后的产品，其结构与原始obj对象相同。然后你可以遍历它并在表格或其他东西中显示它。

假设你想在列表中显示它们，假设你有：

<div id="filteredProducts"></div>

你会这样做：

$('#filteredProducts').empty();  //Clears previous results
$.each(filteredProducts, function(productKey, product){
    $('<div class="title">'+productKey+'<br/>'+
          '<a href="'+ product.url+'">'+ product.url + '</a>'+
      '</div>').appendTo('#filteredProducts');
});

它会将每个产品添加到列表中。

来自玻利维亚拉巴斯的欢呼声

循环遍历多维数组，然后显示结果

1 个答案: