Вывод номера по выбору города

652

20 февраля 2017, 19:07

<label>
    <span>Ваш город:</span>
    <select name="city">
        <option value="Саратов">Саратов</option>
        <option value="Энгельс">Энгельс</option>
        <option value="Балашов">Балашов</option>
        <option value="Балаково">Балаково</option>
    </select>
</label>
<span class="phone-wrap">
    <span class="for_ar">+7 (8452) 23-28-30</span> 
    <span class="callback-wrap">
        <img src="img/phone-icon.png" alt="phone">
        <a href="#callback">Заказать звонок</a>
    </span>
</span>

Как можно реализовать, чтобы при выборе определенного города, выводился определенный номер ? Я понимаю что через JS, может кто с кодом помочь. Заранее спасибо

Answer 1

Допустим телефон хранится в data атрибуте каждого option, тогда при смене города, берем этот option, берем данные из атрибута data и вставляем в span:

var cityPhone = $('.phone-wrap span').first(); 
 
$('select').on('change', function() { 
  var optionSelected = $("option:selected", this); 
  cityPhone.text(optionSelected.data('phone'));   
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<label> 
    <span>Ваш город:</span> 
    <select name="city"> 
        <option value="Саратов" data-phone="666">Саратов</option> 
        <option value="Энгельс" data-phone="999">Энгельс</option> 
        <option value="Балашов" data-phone="777">Балашов</option> 
        <option value="Балаково" data-phone="888">Балаково</option> 
    </select> 
</label> 
<span class="phone-wrap"> 
    <span class="for_ar">+7 (8452) 23-28-30</span>  
    <span class="callback-wrap"> 
        <img src="img/phone-icon.png" alt="phone"> 
        <a href="#callback">Заказать звонок</a> 
    </span> 
</span>

Answer 2

Смотря в каком формате хранятся данные о городах и телефонах. Я такое делал через ajax, у меня данные лежали в mySQL, скрипт возвращал результат запроса данных о телефоне из таблицы городов. У меня было как-то так:

$("#city").change(function(){
     var newcity = $(this).val(); //берем значение нового города
      $.ajax({
     type: 'POST',
     url: 'city.php',
     datatype: 'text',
     data: {city: newcity}, //передаем значение в скрипт
     success: function(datacity){
     //вставляем новое значение. К примеру:
     $(this).val(datacity);
     };
   )}
});

Как-то так :)