根据多个下拉选择从对象中获取相应的值

Posted 2023-05-09

技术标签:

【中文标题】根据多个下拉选择从对象中获取相应的值【英文标题】：Getting respective values from object on the basis of multiple dropdown selections 【发布时间】：2021-09-25 06:23:32 【问题描述】：

我有两个下拉选择器，可以从中选择我的数据数组的键。

我需要的是，一旦选择了第二个下拉列表中的选项，下面的“#Result”Div 就会为对象中的相应值填充。

我的 2 个下拉选择器问题如下：

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

我的数组是这样的：

var BrandJSON = 
    "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 如下：

var markup = '';
    jQuery("#ParentBrand, #Parameter").on('change', function()  
        jQuery("#ParentBrand").find(':selected').each(function(e) 
            var ParentBrandSelected = jQuery(this).val()
            var ParentBrandKey = Object.keys(BrandJSON).filter(v => v.startsWith(ParentBrandSelected))

            jQuery("#Parameter").find(':selected').each(function(e) 
                var ParameterSelected = jQuery(this).val()
                var ParentBrandParameterKey = Object.keys(ParentBrandKey).filter(v => v.startsWith(ParameterSelected))

                jQuery.each(ParentBrandParameterKey, function(k, v)
                    markup += '<a href="/Directory/SubDirectory/'+ BrandJSON.Link +'.html">'
                    markup += '<div class="InnerBlock">'
                    markup += '<div style="background-image:url(https://source.unsplash.com/1280x720/?' + BrandJSON.Image +')">'+ BrandJSON.Heading +'</div>'
                    markup += '</div>'
                    markup += '</a>'
                );
                $("#Result").html(markup);
            );            
        );
    );

目前我得到“未定义”的结果。还有一个问题是，一旦选择了第一个下拉列表而没有选择第二个下拉列表。我该如何纠正这个问题？任何帮助将不胜感激。

在下面找到完整的功能代码sn-p：

jQuery(document).ready(function($) 

  jQuery('#ParentBrand').select2(
    width: '100%'
  );
  jQuery("#Parameter").select2(
    width: '100%'
  );

  var BrandJSON = 
    "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"
    ],
  

  var markup = '';
  jQuery("#ParentBrand, #Parameter").on('change', function() 
    jQuery("#ParentBrand").find(':selected').each(function(e) 
      var ParentBrandSelected = jQuery(this).val()
      var ParentBrandKey = Object.keys(BrandJSON).filter(v => v.startsWith(ParentBrandSelected))

      jQuery("#Parameter").find(':selected').each(function(e) 
        var ParameterSelected = jQuery(this).val()
        var ParentBrandParameterKey = Object.keys(ParentBrandKey).filter(v => v.startsWith(ParameterSelected))

        jQuery.each(ParentBrandParameterKey, function(k, v) 
          markup += '<a href="/Directory/SubDirectory/' + BrandJSON.Link + '.html">'
          markup += '<div class="InnerBlock">'
          markup += '<div style="background-image:url(https://source.unsplash.com/1280x720/?' + BrandJSON.Image + ')">' + BrandJSON.Heading + '</div>'
          markup += '</div>'
          markup += '</a>'
        );
        $("#Result").html(markup);
      );
    );
  );


);

.InnerBlock 
  display: block;
  width: 100%;
  position: relative;
  min-height: 10px;
  margin-top: 5px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.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 id="Result"></div>
</div>

【问题讨论】：

您的问题中没有任何 JSON。通常认为在 javascript 中使用驼峰命名法，但使用 PascalCase 的类除外。我建议更改您的 BrandJSON 对象的结构，以便不需要 Object.keys() 过滤器等来找到您需要的内容。例如。 Brand1:Param1:Sub1:...,Sub2:...,Param2:Sub1:...,Sub2:... => BrandJSON.Brand1.Param2.Sub1 可以使用。在我看来，这将大大简化您的代码。 【参考方案1】：

您循环了错误的元素。你只有一个品牌和一个参数

$("#ParentBrand, #Parameter").on('change', function() 
    const ParentBrandSelected = $('#ParentBrand').val();

    const ParentBrandKeys = Object.keys(Brand).filter(v => v.startsWith(ParentBrandSelected))
    console.log(ParentBrandSelected,ParentBrandKeys)
    const  ParameterSelected = $('#Parameter').val()
    const ParentBrandParameterKeys = ParentBrandKeys.map.....

我没有更多的时间，但这是一个开始

const 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" ], 

$(function() 

  $('#ParentBrand').select2(
    width: '100%'
  );
  $("#Parameter").select2(
    width: '100%'
  );

  $("#ParentBrand, #Parameter").on('change', function() 
    const ParentBrandSelected = $('#ParentBrand').val();

    const ParentBrandKeys = Object.keys(Brand).filter(v => v.startsWith(ParentBrandSelected))
    console.log(ParentBrandSelected,ParentBrandKeys)
    const  ParameterSelected = $('#Parameter').val()
    const ParentBrandParameterKeys = ParentBrandKeys.map(key => Object.keys(Brand[key]).filter(v => v.startsWith(ParameterSelected)))
    console.log(ParentBrandParameterKeys)
    $("#Result").html(
      ParentBrandParameterKeys.map(Brand => `<a href="/Directory/SubDirectory/$Brand.Link.html">
          <div class="InnerBlock">
          <div style="background-image:url(https://source.unsplash.com/1280x720/?$Brand.Image)">$Brand.Heading</div>
          </div>
          </a>`))

  );
);

.InnerBlock 
  display: block;
  width: 100%;
  position: relative;
  min-height: 10px;
  margin-top: 5px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.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 id="Result"></div>
</div>

【讨论】：

以上是关于根据多个下拉选择从对象中获取相应的值的主要内容，如果未能解决你的问题，请参考以下文章

基于多个下拉选择从mysql数据库中获取数据

如何根据我在多个下拉列表中选择的内容创建过滤器？

无法根据角度formarray下拉选择显示/隐藏div [关闭]

从多个复选框获取字符串形式的值

从多个 Listview 行中获取每个 Spinner 的值？

如何创建多个从同一个数组中获取值的动态下拉列表，而无需更改 Javascript 中的其他下拉列表