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

Question

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

我需要的是，一旦选择了第二个下拉列表中的选项，就会为对象中的相应值填充下面的“#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);
            });            
        });
    });

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

在下面找到完整的功能代码片段：

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>

标签： jqueryarraysdropdown

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