Display the number of the choice of the city

Question

<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>

How can I realize that when choosing a particular city, a certain number is displayed? I understand that through JS, can anyone help with the code. Thank you in advance

Well, for example, choose "Balashov", in the span the number is +9 000 000 00 00, choose "Saratov" is displayed - +7 (8452) 23-28-30, etc.
The number thought that it was possible to register in JS, that if you chose such and such a city, such a value would be substituted in the span
The number can be written in the data attribute of each option and taken from there for example.

Alexey Shimansky Alexey Shimansky 36.9k five 47 115 · Accepted Answer · 2017-02-19T13:33:32

Suppose the phone is stored in the data attribute of each option , then when changing the city, take this option , take the data from the data attribute and paste into the 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>

@YourDeveloper, also if the phone is single and unique, you can use it as an option value.
@KirillKorushkin is impossible, if all of a sudden this data (city name) is sent to the server and you need to know which city was sent ..... but there really is a lot of “but” and “if”

Alexxosipov Alexxosipov 1.862 6 26 · Answer 2 · 2017-02-19T10:36:47

It depends on the format in which data about cities and phones is stored. I did this through ajax, my data was in mySQL, the script returned the result of requesting data about the phone from the city table. I had something like this:

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

Something like this :)

There are only 4 numbers, is it possible to register somehow in JS, without a query in the database?
This output is required through the database, in the code itself, no one displays?

Display the number of the choice of the city

2 answers 2

More articles: