JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<span class="cityname">Ваш город:</span>
	<div class="city">
		<div class="skinned-wrapper">
            <div class="skinned-text"><span></span></div>
			<select class="skinned-select">
				<option value="0">Санкт-Петербург</option>
				<option value="1">Москва</option>
				<option value="2">Калининград</option>
		</select>
		</div>
	</div>
</div>
	<div class="phone">
		<span class="span-ind">(495)</span> 
		<span class="span-num">727-72-31</span>
	</div>

	<div class="phone">
		<span class="span-ind">(444)</span> 
		<span class="span-num">727-72-31</span>
	</div>

	<div class="phone">
		<span class="span-ind">(777)</span> 
		<span class="span-num">727-72-31</span>
	</div>

CSS

body {
    background: #000;
    color: #fff;
}
.phone{
     display: none;
   }
   .skinned-text{
    position:  absolute;
    color: #fff;
    padding: 2px;
    border-bottom: 1px dotted #fff;
 
   }
  .skinned-text span {
    position: relative;
    cursor: pointer;
  }
  .skinned-text span:after {
    content:'';
    display: block;
    width: 0;
    height: 0;
    right: -14px;
    top: 6px;
    position: absolute;
    border-style: solid;
    border-width: 6px 5px;
    border-color: #fff transparent transparent transparent;
  }
   .skinned-select {
    padding: 2px;
    height: 28px;
    opacity: 0;
   }

JavaScript

$(function(){
			 	$('.skinned-select').change(function(){
				v=$('.skinned-select').val();
				h=$('option:selected').text();
                $('.skinned-text span').text(h)
				 $('.phone').hide();
				$('.phone:eq('+v+')').show();
			});
		});
      $('.skinned-select').change()