通过下拉列表的'indexof'值获取对象键

Question

我有 2 个下拉菜单，一个允许您选择“品牌”，第二个允许您选择“参数”以访问所选“品牌”中的相应“子品牌”。

我的数组：

var Brand = { "Brand1-Parameter1-SubBrand1": [{"Image": "animal", "Heading": "SubBrand1", "Link": "SubBrand1"}], 
                "Brand1-Parameter1-SubBrand2": [{ "Image": "animal", "Heading": "SubBrand2", "Link": "SubBrand2"}], 
                "Brand1-Parameter2-SubBrand3": [{ "Image": "water", "Heading": "SubBrand3", "Link": "SubBrand3" }], 
                "Brand1-Parameter2-SubBrand4": [{ "Image": "water", "Heading": "SubBrand4", "Link": "SubBrand4" }], 
                "Brand2-Parameter1-SubBrand5": [{ "Image": "travel", "Heading": "SubBrand5", "Link": "SubBrand5" }], 
                "Brand2-Parameter1-SubBrand6": [{ "Image": "travel", "Heading": "SubBrand6", "Link": "SubBrand6" }], 
                "Brand2-Parameter2-SubBrand7": [{ "Image": "flower", "Heading": "SubBrand7", "Link": "SubBrand7" }], 
                "Brand2-Parameter2-SubBrand8": [{ "Image": "flower", "Heading": "SubBrand8", "Link": "SubBrand8" }], 
            } 

我的第一个 jquery 过滤了下拉列表中选择的“品牌”的数组，这很有效：

$("#ParentBrand").on('change', function() {
    var ParentBrandSelected = $('#ParentBrand').val();
    var ParentBrandKeys = Object.keys(Brand).filter(v => v.startsWith(ParentBrandSelected))

第二部分应该过滤包含用'indexOf'选择的'Parameters'的键。

$("#Parameter").on('change', function() {
        var ParameterSelected = $('#Parameter').val()
        var ParentBrandParameterKeys = ParentBrandKeys.map(key => Object.keys(Brand[key]).filter(v => v.indexOf(ParameterSelected) > -1))

但是，第二部分不起作用，控制台显示一个空数组。如何过滤包含所选参数的对象键？

在下面找到完整的代码：

jQuery(document).ready(function($) {

  var Brand = {
    "Brand1-Parameter1-SubBrand1": [{
      "Image": "animal",
      "Heading": "SubBrand1",
      "Link": "SubBrand1"
    }],
    "Brand1-Parameter1-SubBrand2": [{
      "Image": "animal",
      "Heading": "SubBrand2",
      "Link": "SubBrand2"
    }],
    "Brand1-Parameter2-SubBrand3": [{
      "Image": "water",
      "Heading": "SubBrand3",
      "Link": "SubBrand3"
    }],
    "Brand1-Parameter2-SubBrand4": [{
      "Image": "water",
      "Heading": "SubBrand4",
      "Link": "SubBrand4"
    }],
    "Brand2-Parameter1-SubBrand5": [{
      "Image": "travel",
      "Heading": "SubBrand5",
      "Link": "SubBrand5"
    }],
    "Brand2-Parameter1-SubBrand6": [{
      "Image": "travel",
      "Heading": "SubBrand6",
      "Link": "SubBrand6"
    }],
    "Brand2-Parameter2-SubBrand7": [{
      "Image": "flower",
      "Heading": "SubBrand7",
      "Link": "SubBrand7"
    }],
    "Brand2-Parameter2-SubBrand8": [{
      "Image": "flower",
      "Heading": "SubBrand8",
      "Link": "SubBrand8"
    }],
  }

  $("#ParentBrand").on('change', function() {
    var ParentBrandSelected = $('#ParentBrand').val();
    var ParentBrandKeys = Object.keys(Brand).filter(v => v.startsWith(ParentBrandSelected))
    console.log(ParentBrandSelected, ParentBrandKeys)
    jQuery("#Parameter").val(null).trigger('change');

    $("#Parameter").on('change', function() {
      var ParameterSelected = $('#Parameter').val()
      var ParentBrandParameterKeys = ParentBrandKeys.map(key => Object.keys(Brand[key]).filter(v => v.indexOf(ParameterSelected) > -1))
      console.log(ParentBrandParameterKeys)
    });
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <div>Select the Brand:
    <select id="ParentBrand">
      <option></option>
      <option value="Brand1">Brand1</option>
      <option value="Brand2">Brand2</option>
    </select>
  </div>
  <div>Select the Parameter:
    <select id="Parameter">
      <option></option>
      <option value="Parameter1">Parameter1</option>
      <option value="Parameter2">Parameter2</option>
    </select>
  </div>
</div>

Answer 1

您需要一个布尔结果，所以indexOf不是完成这项工作的最佳工具。 includes 是首选，除非您确实需要索引。

您的逻辑失败了，因为您试图在第二个下拉列表中引用 ParentBrandKeys 数组 - 但它的范围仅限于它自己的函数，因此对您的逻辑来说是空的。

如果您将 2 个值设为全局变量，则可以在彼此的逻辑中使用它们。例如，一旦您选择了品牌，您就可以将其用作参数的过滤器。在此，我们将变量保存在函数之外并使用以下方法对其进行测试：

 v.split("-").includes(ParentBrandSelected) && v.split("-").includes(ParameterSelected)

jQuery(document).ready(function($) {

  var Brand = {
    "Brand1-Parameter1-SubBrand1": [{
      "Image": "animal",
      "Heading": "SubBrand1",
      "Link": "SubBrand1"
    }],
    "Brand1-Parameter1-SubBrand2": [{
      "Image": "animal",
      "Heading": "SubBrand2",
      "Link": "SubBrand2"
    }],
    "Brand1-Parameter2-SubBrand3": [{
      "Image": "water",
      "Heading": "SubBrand3",
      "Link": "SubBrand3"
    }],
    "Brand1-Parameter2-SubBrand4": [{
      "Image": "water",
      "Heading": "SubBrand4",
      "Link": "SubBrand4"
    }],
    "Brand2-Parameter1-SubBrand5": [{
      "Image": "travel",
      "Heading": "SubBrand5",
      "Link": "SubBrand5"
    }],
    "Brand2-Parameter1-SubBrand6": [{
      "Image": "travel",
      "Heading": "SubBrand6",
      "Link": "SubBrand6"
    }],
    "Brand2-Parameter2-SubBrand7": [{
      "Image": "flower",
      "Heading": "SubBrand7",
      "Link": "SubBrand7"
    }],
    "Brand2-Parameter2-SubBrand8": [{
      "Image": "flower",
      "Heading": "SubBrand8",
      "Link": "SubBrand8"
    }],
  }

  let ParentBrandSelected = '',
    ParameterSelected = ''
  $("#ParentBrand").on('change', function() {
    ParentBrandSelected = $(this).val();
    let ParentBrandKeys = Object.keys(Brand).filter(v => v.startsWith(ParentBrandSelected))
    console.log(ParentBrandSelected, ParentBrandKeys)
    jQuery("#Parameter").val(null).trigger('change');

    $("#Parameter").on('change', function() {
      ParameterSelected = $(this).val()
      let ParentBrandParameterKeys = Object.keys(Brand).filter(v => v.split("-").includes(ParentBrandSelected) && v.split("-").includes(ParameterSelected))
      console.log(ParentBrandParameterKeys)

      let markup = ''
      jQuery.each(ParentBrandParameterKeys, function(index, value) {
        let useValue = Brand[value][0]
        markup += '<a href="/Directory/SubDirectory/' + useValue.Link + '.html">'
        markup += '<div class="InnerBlock">'
        markup += '<div style="background-image:url(https://source.unsplash.com/1280x720/?' + useValue.Image + ')">' + useValue.Heading + '</div>'
        markup += '</div>'
        markup += '</a>'
      });

      console.log(markup)


    });
  });



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <div>Select the Brand:
    <select id="ParentBrand">
      <option></option>
      <option value="Brand1">Brand1</option>
      <option value="Brand2">Brand2</option>
    </select>
  </div>
  <div>Select the Parameter:
    <select id="Parameter">
      <option></option>
      <option value="Parameter1">Parameter1</option>
      <option value="Parameter2">Parameter2</option>
    </select>
  </div>
</div>