Show-Hide LI basis previous selected dropdown options

I need to populate a image-checkbox selection basis the selections made in the previous dropdowns, as below:

<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=SubBrand style="display: none;">Select the SubBrand:
        <ul>
            <li id="SubBrand1" value="Brand1-Parameter1" style="display: none;">
              <input type="checkbox"/>
              <label for="SubBrand1"><img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" /></label>
            </li>
            <li id="SubBrand2" value="Brand1-Parameter2" style="display: none;">
              <input type="checkbox"/>
              <label for="SubBrand2"><img src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" /></label>
            </li>
            <li id="SubBrand3" value="Brand2-Parameter1" style="display: none;">
              <input type="checkbox"/>
              <label for="SubBrand3"><img src="http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png" /></label>
            </li>
            <li id="SubBrand4" value="Brand2-Parameter2" style="display: none;">
                <input type="checkbox"/>
                <label for="SubBrand4"><img src="http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png" /></label>
              </li>
          </ul>
    </div>

My jQuery to remove the 'style="display: none;"' for the select, relavent 'li' is as below:

$("#ParentBrand").on('change', function() {
    var ParentBrandSelected = $('#ParentBrand').val();
    
    $("#Parameter").on('change', function() {
      ParameterSelected = $(this).val()
      $("#SubBrand ul li").each(function(e) {
        jQuery(this)
        .filter(($(this).attr('value')).split("-").includes(ParentBrandSelected) && ($(this).attr('value')).split("-").includes(ParameterSelected))
        .css('display', '')
    })

      $("#SubBrand").show();
    });

});

However, the '.css('display', '')' is not working and the relevant 'li' remain hidden. How do I make this work?

Find full working code here: https://jsfiddle.net/mh34nfk1/

Solution

In general you should not have a change method inside another change.

Also to make it work you can do it like this:

jQuery(document).ready(function($) {
  var ParentBrandSelected
  $("#ParentBrand").on('change', function() {
    ParentBrandSelected = $('#ParentBrand').val();
  });
  $("#Parameter").on('change', function() {
    ParameterSelected = $(this).val()
    $("#SubBrand ul li").hide();
    $("#SubBrand ul li[value='" + ParentBrandSelected + "-" + ParameterSelected + "']").show();
    $("#SubBrand").show();
  });
});

Demo

jQuery(document).ready(function($) {
  var ParentBrandSelected
  $("#ParentBrand").on('change', function() {
    ParentBrandSelected = $('#ParentBrand').val();
  });
  $("#Parameter").on('change', function() {
    ParameterSelected = $(this).val()
    $("#SubBrand ul li").hide();
    $("#SubBrand ul li[value='" + ParentBrandSelected + "-" + ParameterSelected + "']").show();
    $("#SubBrand").show();
  });
});

.hide {
    display: none;
}
.InnerBlock {
    display:block;
    width: 100%;
    position: relative;
    min-height: 10px;
    margin-top: 5px;
}
ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="myCheckbox"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
}

label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked + label {
  border-color: #ddd;
}

:checked + label:before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked + label img {
  transform: scale(0.9);
  /* box-shadow: 0 0 5px #333; */
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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 id=SubBrand style="display: none;">Select the SubBrand:
    <ul>
      <li id="SubBrand1" value="Brand1-Parameter1" style="display: none;">
        <input type="checkbox" />
        <label for="SubBrand1"><img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" /></label>
      </li>
      <li id="SubBrand2" value="Brand1-Parameter2" style="display: none;">
        <input type="checkbox" />
        <label for="SubBrand2"><img src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" /></label>
      </li>
      <li id="SubBrand3" value="Brand2-Parameter1" style="display: none;">
        <input type="checkbox" />
        <label for="SubBrand3"><img src="http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png" /></label>
      </li>
      <li id="SubBrand4" value="Brand2-Parameter2" style="display: none;">
        <input type="checkbox" />
        <label for="SubBrand4"><img src="http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png" /></label>
      </li>
    </ul>
  </div>
  <div id="DivResult"></div>
</div>

I've added another example, where you can change both select and it will display the results if there is any

Demo 2

jQuery(document).ready(function($) {
  var ParentBrandSelected
  $("#ParentBrand").on('change', function() {
    ParentBrandSelected = $('#ParentBrand').val();
    $("#Parameter").change();
  });
  $("#Parameter").on('change', function() {
    var ParameterSelected = ParentBrandSelected + "-" + $(this).val()
    $("#SubBrand ul li").hide();
    $("#SubBrand ul li[value='" + ParameterSelected + "']").show();
    var n = $("#SubBrand ul li[value='" + ParameterSelected + "']").length > 0;
    $("#SubBrand").toggle(n);
  });
});

.hide {
  display: none;
}

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

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="myCheckbox"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
}

label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked+label {
  border-color: #ddd;
}

:checked+label:before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked+label img {
  transform: scale(0.9);
  /* box-shadow: 0 0 5px #333; */
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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 id=SubBrand style="display: none;">Select the SubBrand:
    <ul>
      <li id="SubBrand1" value="Brand1-Parameter1" style="display: none;">
        <input type="checkbox" />
        <label for="SubBrand1"><img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" /></label>
      </li>
      <li id="SubBrand2" value="Brand1-Parameter2" style="display: none;">
        <input type="checkbox" />
        <label for="SubBrand2"><img src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" /></label>
      </li>
      <li id="SubBrand3" value="Brand2-Parameter1" style="display: none;">
        <input type="checkbox" />
        <label for="SubBrand3"><img src="http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png" /></label>
      </li>
      <li id="SubBrand4" value="Brand2-Parameter2" style="display: none;">
        <input type="checkbox" />
        <label for="SubBrand4"><img src="http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png" /></label>
      </li>
    </ul>
  </div>
  <div id="DivResult"></div>
</div>