0

在从 JSON 对象中查找数据和显示数据方面，我仍然是一个新手，所以请回答我的问题，看看它的价值，我会尽量详细说明。

我需要一些帮助来编写一些 jQuery，它将在更改事件的选择框中获取选项的值并过滤从 JSON 对象填充的列表。

基本上我最终想要达到的是一个多维多面导航模型，它采用 JSON 对象并允许用户在更改事件上过滤该列表。

我意识到这有点含糊，但我会尽量回答你的问题。

到目前为止，这是我对 JS 的了解：

function getBeers(){
    $.grep(getBeerType, function(key, val){
      $.getJSON('includes/data.json', function(data) {
        var beers = [];

        $.each(data, function(key, val) {
          beers.push('<li id="' + key + '">' + val + '</li>');
        });

        $('<ul/>', {
          html: items.join('')
        }).appendTo('#beerlist');
      });
    });
  };

  $("#beerselector").change(function(){
    var getBeerType = $(this).val();
    getBeers(getBeerType);
  });

和 JSON：

{"beers":[
        {
            "name":"Surly Wet",
            "type":"Ale"
        },
        {
            "name":"Spaten Oktoberfest",
            "type":"Lager"
        },
        {
            "name":"Pliny the Elder",
            "type":"Ale"
        },
        {
            "name":"Summit IPA",
            "type":"Ale"
        },
        {
            "name":"Surly Coffee Bender",
            "type":"Porter"
        },
        {
            "name":"Lagunitas IPA",
            "type":"Ale"
        }
]}

和 HTML：

  <label for="beerselector">What's your favorite beer type?</label>
  <select id="beerselector">
    <option value="">I like all beer</option>
    <option value="ale">Ales</option>
    <option value="lager">Lagers</option>
  </select>

  <div id="beerlist"></div>
4

0 回答 0