When div.plans-item-title is changed, a change should occur in select.plans-select and the desired div.number should be displayed (it did and works). In which direction to dig, so that when you change to select divs now change?

 $(".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>

    2 answers 2

    For example:

     $(".plans-item-title").click(function() { var $this = $(this), classItem = $this.data('class'), plans = $('.plans-items'); plans.filter('.plan-'+classItem) .add($this) .addClass('active') .siblings() .removeClass('active'); $('#plans-select').val(classItem); }); $('.plans-items-title-select').on('change', function() { var val = this.value, title = $('.plans-item-title'), plans = $('.plans-items'); plans.filter('.plan-'+val) .addClass('active') .siblings() .removeClass('active'); title.filter('.title-'+val) .addClass('active') .siblings() .removeClass('active'); }); 
     .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://code.jquery.com/jquery-2.2.4.js"></script> <div class="plans-row row"> <div class="plans-items-title"> <div class="plans-item-title title-room-1 active" data-class="room-1">1-к</div> <div class="plans-item-title title-room-2" data-class="room-2">2-к</div> <div class="plans-item-title title-room-3" data-class="room-3">3-к</div> </div> <select name="plans-select" id="plans-select" class="plans-items-title-select"> <option value="room-1" >1-к</option> <option value="room-2" >2-к</option> <option value="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> 

       $(".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()); }); $( "select" ).change(function() { var $selected = $("select#plans-select option:selected").data("class"); $('.plans-items').each(function() { if($(this).hasClass($selected)) { $(this).addClass("active"); }else{ $(this).removeClass("active"); } }) }) 
       .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>

      Have option removed point from data-class value.