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

Posted

技术标签:

【中文标题】通过下拉列表的\'indexof\'值获取对象键【英文标题】：Getting object key by 'indexof' value of dropdown通过下拉列表的'indexof'值获取对象键 【发布时间】：2021-09-25 09:40:28 【问题描述】：

我有 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>

【问题讨论】：

【参考方案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>

【讨论】：

继续上述内容，如果我希望使用每个键的值 jQuery.each(ParentBrandParameterKeys, function(index, value)markup += '&lt;a href="/Directory/SubDirectory/'+ value.Link +'.html"&gt;'markup += '&lt;div class="InnerBlock"&gt;'markup += '&lt;div style="background-image:url(https://source.unsplash.com/1280x720/?' + value.Image +')"&gt;'+ value.Heading +'&lt;/div&gt;'markup += '&lt;/div&gt;'markup += '&lt;/a&gt;');' 不起作用。我如何从中获得每个值？ S抱歉这些愚蠢的问题，我还在学习这个。 我更新了我的答案以显示如何。该数组是一个 KEYS 数组，因此您需要访问 Brand 对象以查找要使用的数据。然后，在Brand 中，数据在一个数组中，所以你会找到像useValue = Brand[value][0] 这样的对象 - 请参阅更新

以上是关于通过下拉列表的'indexof'值获取对象键的主要内容，如果未能解决你的问题，请参考以下文章

在servlet中怎样获取jsp中下拉列表中的值

delphi 下拉框问题

如何从下拉列表中获取值并插入 MySQL Workbench？

无法从下拉列表中获取值[关闭]

根据多个下拉过滤获取数据值

selenium-获取下拉选择框value默认的文本，而不是下拉框所有的文本值