Show-Hide LI 基于之前选择的下拉选项

Question

我需要根据之前下拉菜单中的选择填充图像复选框选择，如下所示：

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

我的 jQuery 删除 'style="display: none;"' 进行选择，相关的 'li' 如下：

$("#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();
    });

});

但是，'.css('display', '')' 不起作用，相关的 'li' 仍然隐藏。我该如何完成这项工作？

在这里找到完整的工作代码：https://jsfiddle.net/mh34nfk1/

Answer 1

一般来说，您不应该在另一个更改中包含更改方法。

为了让它工作，你可以这样做：

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();
  });
});

演示

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>

我添加了另一个示例，您可以在其中更改两个选择，如果有任何结果，它将显示结果

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