显示-隐藏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>