Нужна помощь
 

Всем привет. Подскажите , есть скрипт:

<div class="city_select">Ваш город? <select name="choose" id="choose" class="input-select">
				  <option value="nul" selected disabled>Выберите город:</option>
				  <option value="opt1">Владивосток</option>
				  <option value="opt2">Уссурийск</option>
				  <option value="opt3">Арсеньев</option>
				</select></div>
            <section class="jqueryOptions opt1">
        		<div class="mail">
        			<a href="mailto:email1@mail.ru">email1@mail.ru</a></div>
        			<div class="phone">
        			<a href="tel:2939392">Тел: 6464564564</a>
        			<span>[[getResourceField? &id=`11` &field=`companyworktime` &isTV=`1`]]</span>
        		</div>
	        </section>
	
        	<section class="jqueryOptions opt2">
        		<div class="mail">
        			<a href="mailto:email2@mail.ru">email2@mail.ru</a></div>
        			<div class="phone">
        			<a href="tel:567567">Тел: 45353</a>
        			<span>[[getResourceField? &id=`11` &field=`companyworktime` &isTV=`1`]]</span>
        		</div>
        	</section>  
	
	<script>
	    $(function() {
  $('.jqueryOptions').hide();

  $('#choose').change(function () {
    $('.jqueryOptions').slideUp();
    $('.jqueryOptions').removeClass('current-opt');
    $("." + $(this).val()).slideDown();
    $("." + $(this).val()).addClass('current-opt');
  });
});
	</script>

1.Как сделать так, чтобы если не выбран город, то по умолчанию показывался определенный блок? например opt1 или какой-либо другой default

2. Поле выбора города на сайте будет одно, а значения контактов будут меняться в шапке сайта и на странице контактов, но оформление блока в шапке и в контактах будет разное, как не прибегая к css, сделать так, чтобы при выборе опции opt1 показывался блок opt1 и например еще блок opt_contact1, а при выборе опции opt2 показывался блок opt2 и например еще блок opt_contact2

Просто выключи не нужные и оставь нужный.

У всех вкл/выкл элементов должен быть единый класс... Или родитель. При событии изменения селекта нужно выключить все однотипные элементы, а потом включить нужный.

Первый вариант сделал так, но не знаю на сколько это правильно:

<select name="choose" id="choose" class="input-select">
				  <option value="nul" selected disabled>Выберите:</option>
				  <option value="opt1">Владивосток</option>
				  <option value="opt2">Уссурийск</option>
				<!--  <option value="opt3">Арсеньев</option>-->
				</select>


<section class="jqueryOptions opt1">
        		
	        </section>


	<script>
	    $(function() {
  $('.jqueryOptions').hide();
  $('.opt1').show();

  $('#choose').change(function () {
    $('.jqueryOptions').slideUp();
    $('.jqueryOptions').removeClass('current-opt');
    $("." + $(this).val()).slideDown();
    $("." + $(this).val()).addClass('current-opt');
  });
});
	</script>

Работает, но так правильно или нет, не знаю

Можно еще сделать так, чтобы выбранное значение сохранялось в сессию или cookies и не менялось при обновлении страницы?

Сессия умрет по закрытию окна. Серверная сессия умрет еще если вышел таймаут неактивности...

К кукам можно еще добавить локальное хранилище.