JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<select id="actual_number">
    <option value="0" data-num="+7(727)3567170" data-city="Алматы">Алматы</option>
    <option value="1" data-num="+7(7172)788388" data-city="Нур-Султан">Нур-Султан</option>
    <option value="2" data-num="+7(7252)607070" data-city="Шымкент">Шымкент</option>
    <option value="3" data-num="+7(7292)782400" data-city="Актау">Актау</option>
    <option value="4" data-num="+7(7122)933600" data-city="Атырау">Атырау</option>
    <option value="5" data-num="+7(7132)723900" data-city="Актобе">Актобе</option>
    <option value="6" data-num="+7(7212)904100" data-city="Караганда">Караганда</option>
    <option value="7" data-num="+7(7182)498800" data-city="Павлодар">Павлодар</option>
    <option value="8" data-num="+7(7152)633500" data-city="Петропавловск">Петропавловск</option>
    <option value="9" data-num="+7(7222)683600" data-city="Семей">Семей</option>
    <option value="10" data-num="+7(7262)924600" data-city="Тараз">Тараз</option>
    <option value="11" data-num="+7(7112)961800" data-city="Уральск">Уральск</option>
    <option value="12" data-num="+7(7232)16500" data-city="Усть-Каменогорск">Усть-Каменогорск</option>
</select>
<a href="tel:+7(727)356-71-70" id="city_name">Алматы: +7(727)3567170</a>

JavaScript

$(document).ready(function(){
 
 var phoneActual = $('a.city_name');
 
 // Функция для установки номера телефона и названия города
 function setNum(cityNum){
    var selectedOption = $('#actual_number option[value="' + cityNum + '"]');
    var cityName = selectedOption.attr('data-city');
    var cityPhone = selectedOption.attr('data-num');
  
    // Устанавливаем выбранный option
    selectedOption.prop('selected', true);
  
    // Обновляем ссылку с телефоном и названием города
    phoneActual.text(cityName + ': ' + cityPhone);
    phoneActual.attr('href', 'tel:' + cityPhone);
 }
 
 // Получаем сохранённое значение города из cookie
 var savedCity = $.cookie('selected_city');
 if (savedCity !== undefined){
    setNum(savedCity);  // Если cookie существует, используем сохранённый город
 }
 
 // Обрабатываем изменение выбранного города
 $('#actual_number').on('change', function() {
    var selectedOption = $(this).find('option:selected');
    var selectedCityValue = selectedOption.val();  // Сохраняем значение value выбранного option
    
    // Сохраняем выбранный город в cookie
    $.cookie('selected_city', selectedCityValue, { expires: 7, path: '/' });
    
    // Устанавливаем номер и город
    setNum(selectedCityValue);
 });
 
});