При изменении div.plans-item-title
должно происходить изменение в select.plans-select
и отображаться нужный div.number
(это сделал и работает). В какую сторону копать, что бы при изменении в select
изменялись теперь ужеdiv
ы?
$(".plans-item-title").click(function() {
$(".plans-item-title").removeClass('active');
$().addClass('active');
$('.plans-items').removeClass('active');
$($(this).attr('data-class')).addClass('active');
$('#plans-select').val($(this).text());
});
.plans-items-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 70px;
}
.plans-item-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 0 15%;
flex: 0 0 15%;
max-width: 15%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1rem;
padding: 0 10px;
color: #777;
cursor: pointer;
border-bottom: 1px solid #eee;
}
.plans-item-title.active {
color: #222;
cursor: default;
border-bottom: 1px solid #222;
}
.plans-items-title-select {
margin-top: 50px;
width: 70%;
margin-left: auto;
margin-right: auto;
height: 40px;
}
.plans-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.plans-items {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 45px;
margin-bottom: 45px;
display: none;
}
.plans-items.active {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.plans-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 10px;
margin-right: 10px;
}
.numder {
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plans-row row">
<div class="plans-items-title">
<div class="plans-item-title active" data-class=".plan-room-1">1-к</div>
<div class="plans-item-title" data-class=".plan-room-2">2-к</div>
<div class="plans-item-title" data-class=".plan-room-3">3-к</div>
</div>
<select name="plans-select" id="plans-select" class="plans-items-title-select">
<option value="1-к" data-class=".plan-room-1">1-к</option>
<option value="2-к" data-class=".plan-room-2">2-к</option>
<option value="3-к" data-class=".plan-room-3">3-к</option>
</select>
<div id="plan-room-1" class="plans-items plan-room-1 active">
<div class="numder">1</div>
</div>
<div id="plan-room-2" class="plans-items plan-room-2">
<div class="numder">2</div>
</div>
<div id="plan-room-3" class="plans-items plan-room-3">
<div class="numder">3</div>
</div>
</div>