JSFiddle - React, Tailwind, and code Playground
HTML
<div class="calk_form">
<div class="form">
<select name="calc_city" id="calc_city" class="full" onchange="calc_tarif.disabled = !this.selectedIndex">
<option value="" disabled selected>Выберите город</option>
<option value="1" class="1">Люберцы</option>
<option value="1" class="1">Москва</option>
<option value="1" class="1">Московский</option>
<option value="2" class="2">Калуга</option>
<option value="3" class="3">Малоярославец</option>
<option value="4" class="4">Обнинск</option>
<option value="5" class="5">Орехово-Зуево</option>
</select>
<select name="calc_tarif" id="calc_tarif" class="full" disabled onchange="calc_proba.disabled = !this.selectedIndex">
<option value="" class="1">Программа кредитования</option>
<option value="" class="2">Программа кредитования</option>
<option value="" class="3">Программа кредитования</option>
<option value="" class="4">Программа кредитования</option>
<option value="" class="5">Программа кредитования</option>
<option value="1" class="1">7:40</option>
<option value="2" class="1">До получки</option>
<option value="3" class="1">Пенсионный</option>
<option value="4" class="1">Супер Ноль %</option>
<option value="5" class="1">Свои Люди</option>
<option value="1" class="2">7:40</option>
<option value="1" class="3">7:40</option>
<option value="1" class="4">7:40</option>
<option value="1" class="5">7:40</option>
...
CSS
select option[disabled] {
display: none;
}
JavaScript
$(document).ready(function(){
var windowHeight = $(window).height();
windowHeightMinF = windowHeight - 70; /* Минус футер */
$('.contact_block.full').css('height', windowHeightMinF);
$('.slider').slick({
slidesToShow: 1,
arrows: false,
dots: true,
slidesToScroll: 1,
draggable: false,
autoplay: true,
autoplaySpeed: 3000,
fade: true
});
$('#city_top, #city_bottom').on('click', '.select span', function() {
$('#city_top, #city_bottom').parent().find('.list').removeClass('show');
$(this).parent().find('.list').addClass('show');
});
init();
$('#city_top .list, #city_bottom .list').on('click', 'li', function() {
var cityid = $(this).attr('data-id');
var cityname = $(this).text();
$('#city_top .list li, #city_bottom .list li').removeClass('active');
$(this).addClass('active');
$('#city_top .select span, #city_bottom .select span').text(cityname);
$('#city_top, #city_bottom').find('.list').removeClass('show');
$('#bt-menu .phone div').removeClass('active');
$('#bt-menu .phone div[data-id="'+cityid+'"]').addClass('active');
$('.contact_block_inner li').removeClass('active');
$('.contact_block_inner li[data-id="'+cityid+'"]').addClass('active');
$.cookie('city_id', cityid);
$.cookie('city_name', cityname);
setCenter(cityid);
});
if ( $.cookie('city_id') && $.cookie('city_name')){
var cityid = $.cookie('city_id');
var cityname = $.cookie('city_name');
$('#city_top .list li, #city_bottom .list li').removeClass('active');
$('#city_top .list li[data-id="'+cityid+'"]').addClass('active');
$('#city_top .select span, #city_bottom .select span').text(cityname);
$('#city_top, #city_bottom').find('.list').removeClass('show');
$('#bt-menu .phone div').removeClass('active');
$('#bt-menu .phone div[data-id="'+cityid+'"]').addClass('active');
$('.contact_block_inner li').removeClass('active');
$('.contact_block_inner...