Подскажите пожалуйста, как сделать,что-бы при выборе двух значений select
показывало только один div
?
Например, при выборе первого select - "Green"
и второго "little box"
отображался div: "Green little box"
.
Пробовал пример с цветами, но показывает два элемента div
.
Вот код:
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".big").not("." + optionValue).hide();
$(".little").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".big").hide();
$(".little").hide();
}
});
}).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select>
<option>Choose Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
<div>
<select>
<option>Choose Size</option>
<option value="big">big box</option>
<option value="little">little box</option>
</select>
</div>
<div class="red big">Red big box</div>
<div class="red little">Red little box</div>
<div class="green big">Green big box</div>
<div class="green little">Green little box</div>