JSFiddle - React, Tailwind, and code Playground
by Alexey Ukolov
HTML
<div class="b-parent">
<div class="b-parent-item">
<div class="b-price">
<div class="b-price-item" data-price="50">50</div>
<div class="b-price-item" data-price="100">100</div>
<div class="b-price-item" data-price="110">110</div>
<div class="b-price-item" data-price="130">130</div>
</div>
</div>
<div class="b-parent-item">
<select name="" class="select">
<option value="-1">Параметр 1</option>
<option selected value="50">50</option>
<option value="100">100</option>
<option value="110">110</option>
<option value="130">130</option>
</select>
</div>
</div>
<div class="b-parent">
<div class="b-parent-item">
<div class="b-price">
<div class="b-price-item" data-price="50">50</div>
<div class="b-price-item" data-price="100">100</div>
<div class="b-price-item" data-price="110">110</div>
<div class="b-price-item" data-price="130">130</div>
</div>
</div>
<div class="b-parent-item">
<select name="" class="select">
<option value="-1">Параметр 2</option>
<option selected value="50">50</option>
<option value="100">100</option>
<option value="110">110</option>
<option value="130">130</option>
</select>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.b-parent {
border: 1px solid #ccc;
text-align: center;
margi: 15px auto;
}
.b-parent-item {
display: inline-block;
vertical-align: middle;
padding: 1em;
}
.b-price-item,
.b-price-item-2 {
display: none;
}
.b-price-item:nth-of-type(1),
.b-price-item-2:nth-of-type(2) {
display: block;
}
JavaScript
$('.select').on('change', function() {
var selectedPrice = +$(this).val(),
$priceContainer = $(this).closest('.b-parent-item').prev('.b-parent-item'),
$prices = $priceContainer.find('.b-price-item');
$prices.hide();
$prices.filter(function() {
return $(this).data('price') === selectedPrice;
}).show();
});