There are 2 related select lists with the values of and to , implemented with select2 :
if($('.select').length){ $('.select').select2({ tags: true, placeholder: function(){ if($(this).data('placeholder')){ $(this).data('placeholder'); } } }); $('.select-from').change(function(){ var selecteId = $(this).select2('val'); var x = parseInt(selecteId)+1; console.log(x); $('.select-to').select2('val', '' +x ); for(var i = 0; i <= selecteId; i++){ $('.select-to').find('option:nth-of-type('+i+')').prop("disabled", true); $('.select-to').select2(); } }); } <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <div class="container"> <div class="filter-col filter-col_room"> <span class="filter-text d-block mb-4"> Кол-во спален </span> <div class="d-flex align-items-center"> <span class="filter-col__label mr-2"> от </span> <select name="catalog-filter-from" class="select select-from" id="count-room-from"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <span class="filter-col__label ml-4 mr-2"> до </span> <select name="catalog-filter-to" class="select select-to" id="count-room-to"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </div> </div> Now everything works, but only 1 time. Those. when you specify the number from again in the second list, the old values remain - disabled !
Question: How to connect these lists so that in the second list it was impossible to set a value less than the first?
