Как сделать выбор города на сайте html

Выбор страны и города через select на JavaScript

Рассмотрим задачу на практическое применение выпадающих списков select. Пусть у нас есть селект со странами и селект с городами. Давайте сделаем так, чтобы при выборе определенный страны во втором селекте появлялись города этой страны. Найдем самое универсальное решение!

Исходники кода

var countriesSelect = document.querySelector(‘#countries-select’); var citiesSelect = document.querySelector(‘#cities-select’); var data = < Россия: ['Москва', 'Питер', 'Воронеж'], Беларусь: ['Минск', 'Витебск', 'Орша'], Украина: ['Киев', 'Львов', 'Одесса'], >var countries = Object.keys(data); addOptions(countriesSelect, countries); var defaultCities = data[countries[0]]; addOptions(citiesSelect, defaultCities); countriesSelect.addEventListener(‘change’, function() < var cities = data[this.value]; citiesSelect.length = 0; addOptions(citiesSelect, cities); >); function addOptions(select, arr) < for (var i = 0; i < arr.length; i++) < select.add(new Option(arr[i])); >>

Смотрите также

видео
теория по работе с select на JavaScript

Трепачёв Дмитрий © 2012-2023
t.me/trepachev_dmitry

Выбор города при входе на сайт — Разработка расширений для Joomla

Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��

JoomlaDay Spain, Madrid.

В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.

API Выбор города из выпадающего списка по начальным буквам (API+Ajax)

Большинство API функций сервиса htmlweb.ru совершенно бесплатны. Идентификация нужна для исключения злоупотреблений и позволяет разделить количество запросов от разных пользователей. Ограничения на бесплатные запросы и тарификация описана здесь.

Для идентификации используется API_KEY из_профиля. API_KEY может быть передан как GET так и POST запросом.
Не размещайте ключ API_KEY в открытом доступе и в javascript. Он фактически заменяет ваши логин пароль и дает возможность использовать весь функционал нашего сайта от вашего аккаунта, включая платные функции.

Ключи выбора формата:

html — HTML-формат.
json — JSON-формат
xml — XML-формат

Для указания кодирования ответа в нужном вам формате добавьте в запрос параметр html или json или xml, например:

http://htmlweb.ru/geo/api.php?city=1711&html&charset=utf-8&api_key=xxxx

При возврате в формате JSON возврашается заголовок header(‘Access-Control-Allow-Origin: *’) — разрешающий кроссдоменные запросы.

Ключ выбора кодировки charset=:

windows-1251 по умолчанию всё отдается в кодировке utf-8
utf-8 unicode — кодировка UTF-8. Пример: charset=utf-8
а также другие: koi-8, ISO-8859-1, ISO-8859-15, cp866, cp1252, KOI8-R

fields — какие поля включать в ответ, например:
http://htmlweb.ru/geo/api.php?city=1711&sql=pb_city&fields=id,name,english,area,rajon,country

Если Вам нужен другой формат или другая кодировка, а также обо всех найденных проблемах и пожеланиях сообщайте нам.

Структура API запроса для получения списка городов соответствующих шаблону:

http://htmlweb.ru/geo/api.php?html&city_name=НАЧАЛО_НАЗВАНИЯ_ГОРОДА&api_key=API_KEY_из_профиля

Структура API запроса для получения списка городов в json-формате, соответствующих шаблону:

http://htmlweb.ru/geo/api.php?json&city_name=НАЧАЛО_НАЗВАНИЯ_ГОРОДА&api_key=API_KEY_из_профиля

Структура API запроса для получения списка городов в option/select-формате для отображения выпадающего списка:

http://htmlweb.ru/geo/api.php?city_name=НАЧАЛО_НАЗВАНИЯ_ГОРОДА&api_key=API_KEY_из_профиля

Пример для города Москва с Вашим API_KEY:

https://htmlweb.ru/geo/api.php?html&city_name=москва&api_key=НЕДОСТУПНО_БЕЗ_РЕГИСТРАЦИИ

Ответ для option/select:

Параметр limit в ответе показывает количество оставшихся запросов до конца суток для бесплатных запросов или количество запросов до окончания тарифа при платных. Ограничения на бесплатные запросы и тарификация описана здесь.

Как интегрировать готовый скрипт выбора города по начальным буквам себе на сайт?

Добавьте сайт, на котором Вы собираетесь разместить скрипт в Профиль->ограничить домены. В код страницы вставьте следующий HTML-код:

     Выбор города из выпадающего списка по начальным буквам    Выбор города из выпадающего списка по начальным буквам
 Введите город: 





 
 
'+_geo.city_name+', код: '+_geo.city_id+''); return false; > //-->

Код скрипта api.js:

//"use strict" var _geo= //console.log(_geo.f_Choce); _geo.x=-1; _geo.y=0; _geo.city_name=""; >, Choice:function(e)< if(!_geo.f_Choice)_geo.f_Choice=CityChoice; _geo.f_Choice(e); _geo.o_city.focus(); _geo.o_city.select(); _geo.o_select.style.visibility = 'hidden'; // спрячем select >, PressKey2:function(e) < // вызывается при нажатии клавиши в select e=e||window.event; t=(window.event) ? window.event.srcElement : e.currentTarget; // объект для которого вызвано if(e.keyCode==13)< // Enter //_geo.o_city.form.onsubmit(); _geo.o_city.value=_geo.city_name=t.options[t.selectedIndex].text;_geo.city_id=t.options[t.selectedIndex].value; _geo.Choice(); return;>if(e.keyCode==38&&t.selectedIndex==0) < // Up _geo.o_city.focus(); _geo.o_select.style.visibility = 'hidden'; // спрячем select >>, // Определение координаты элемента pageX:function(elem) < return elem.offsetParent ? elem.offsetLeft + _geo.pageX( elem.offsetParent ) : elem.offsetLeft; >, pageY:function(elem) < return elem.offsetParent ? elem.offsetTop + _geo.pageY( elem.offsetParent ) : elem.offsetTop; >, PressKey:function(e) < /* вызывается при отпускании кнопки в input */ e=e||window.event; t=(window.event) ? window.event.srcElement : e.currentTarget; // объект для которого вызвано g=_geo.o_select; if(_geo.x==-1&&_geo.y==0)if(e.keyCode==40) if(_geo.city_name==t.value)return; // если ничего не изменилось не "замучить" сервер _geo.city_name=t.value; if(_geo.timer) if(_geo.city_name.length <3)< g.style.visibility = 'hidden'; // спрячем select return;>_geo.timer=window.setTimeout('_geo.Load()',1000); // загружаю через 1 секунду после последнего нажатия клавиши >, Load:function()< _geo.timer=0; _geo.o_select.options.length=0; ajaxLoad(_geo.o_select, '/geo/api.php?city_name='+_geo.city_name); _geo.o_select.style.visibility='visible'; >, getGeo:function(p,f)< /* p=0 - по IP, p=1 по данным браузера с запросом пользователя, p=2 - точно по данным браузера с запросом пользователя и использованием GPS f=html или f=json */ if(!p || !navigator.geolocation)< ajaxLoad(_geo.o_info, '/geo/api.php?ip'+(f?'&'+f:''),'Загрузка. ','', function (obj, ajaxObj, callback)< if(ajaxObj.readyState==4) updateObj(obj, ajaxObj.responseText); hide('wait'); return false; >); >else if(navigator.geolocation) < _geo.timer = setTimeout("_geo.geolocFail()", 10000); navigator.geolocation.getCurrentPosition(function(position) < clearTimeout(_geo.timer); _geo.timer=0; //updateObj(_geo.o_info, "latitude (широта): " + position.coords.latitude + " , longitude (долгота): " + position.coords.longitude + ""); ajaxLoad(_geo.o_info, '/api/geo/city_coming?latitude='+position.coords.latitude+'&longitude='+position.coords.longitude+'&perpage=1'+(f?'&'+f:''),'Загрузка. ','', function (obj, ajaxObj, callback) < if(ajaxObj.readyState==4) updateObj(obj, ajaxObj.responseText); hide('wait'); return false; >); >, function(error) < clearTimeout(_geo.timer); _geo.timer=0; _geo.geolocFail(error); >, < maximumAge:100000, timeout:10000, enableHighAccuracy. (p==2) >); > else < _geo.geolocFail(); >>, geolocFail:function(e) < if(typeof(e)=='object')< switch (e.code) < case e.PERMISSION_DENIED: updateObj(_geo.o_info, "Посетитель не дал доступ к сведениям о местоположении", true); break; case e.POSITION_UNAVAILABLE: updateObj(_geo.o_info, "Невозможно получить сведения о местоположении", true); break; case e.TIMEOUT: updateObj(_geo.o_info, "Истёк таймаут, в течение которого должны быть получены данные о местоположении", true); break; default: updateObj(_geo.o_info, "Возникла ошибка '" + e.message + "' с кодом " + e.code, true); >>else < updateObj(_geo.o_info, "Ваш браузер не поддерживает гео-локацию", true); >> >; /* дальше идут общие функции */ if(0) < function getObj(objID)< if (document.getElementById) else if (document.all) else if (document.layers) return''; > function ajaxLoad(obj,url,defMessage,post,callback) < var ajaxObj; if(typeof(obj)!="object")obj=document.getElementById(obj); if(defMessage&&obj)obj.innerHTML=defMessage; if(window.XMLHttpRequest)< ajaxObj = new XMLHttpRequest(); >else if(window.ActiveXObject) < ajaxObj = new ActiveXObject("Microsoft.XMLHTTP"); >else < return false; >ajaxObj.open ((post?'POST':'GET'), url); if(post&&ajaxObj.setRequestHeader) < if(post=='chat')else ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8;"); > ajaxObj.setRequestHeader("Referer", window.location.href); ajaxObj.onreadystatechange = ajaxCallBack(obj,ajaxObj,(callback?callback:null)); ajaxObj.send(post); return false; > if (!window.getComputedStyle) < // борьба с IE window.getComputedStyle = function(el, pseudo) < this.el = el; this.getPropertyValue = function (prop) < var re = /(\-([a-z]))/g; if (prop == "float") prop = "styleFloat"; if (re.test(prop)) < prop = prop.replace(re, function () < return arguments[2].toUpperCase(); >); > return el.currentStyle[prop] ? el.currentStyle[prop] : null; >; return this; > > function updateObj(obj, data, bold, blink) < if(bold)data=data.bold(); if(blink)data=data.blink(); if(typeof(obj)!="object")obj=document.getElementById(obj); o=obj; do< if(o.style)> o=o.parentNode; >while(o); ajaxEval(obj, data); > function ajaxEval(obj, data) < if(obj.tagName=='INPUT'||obj.tagName=='TEXTAREA')< if(obj.value!=data)< obj.value=data; if(obj.onchange!=null)obj.onchange(obj); >>else if(obj.tagName=='SELECT') < if(typeof(data)=='number' || data.indexOf('<')<0)< // это value for(i=0;i>else< obj.options.length = 0; var re=new RegExp ("","img"); data=data.match(re); if(data)< for(i=0;i]+)","i"); value=re0.exec(data[i]); value= value==null? '' : value[1];> var re1=new RegExp ("]+>([^<]+)","i"); text=re1.exec(data[i]); text= text==null? null : text[1]; var re4 = new RegExp ("class=[\'\"]([^\'\"]+)[\'\"]","i"); defclass=re4.exec(data[i]); j=obj.options.length; if (text !=null)< var re2 = /selected/i; defSelected=re2.test(data[i]); obj.options[j] = new Option(text, value,defSelected,defSelected); var re3 = /disabled/i; if(re3.test(data[i]))obj.options[j].disabled=true; if(defclass!=null) obj.options[j].className=defclass[1]; >else obj.options[j] = new Option('ОШИБКА!', '' ); > >> >else if(typeof(data)=='object' && obj.tagName=='A') < //console.log('data=',data, ', obj=',obj); for(k in data)< //console.log(obj,'[',k, '] =',data[k]); if(k=='innerHTML')obj.innerHTML=data[k]; else obj.setAttribute(k, data[k]); >>else obj.innerHTML = data; > function ajaxJson(obj, data) < if(!data)return; ajaxObj=eval("(" + data + ")"); if(obj.tagName!="FORM"&&obj.form)obj=obj.form; if(obj.tagName!="FORM")< ajaxEval(obj, ajaxObj); return; >for(key in ajaxObj)< o=obj[key]; if(typeof(ajaxObj[key])=='object')< if(typeof(o)=='object' && o.tagName=='SELECT')< o.options.length = 0; j=0; s=ajaxObj[key]; for(k in s)< m=s[k]; if(typeof(m)=='object')< if(typeof(m['selected'])=='undefined')m['selected']=false; if(typeof(m['value'])=='undefined')m['value']=k; o.options[j++] = new Option(m['text'], m['value'] ,m['selected'],m['selected']); for(var k1 in m)if(k1!='text'&&k1!='value'&&k1!='selected')o.options[j-1].setAttribute(k1,m[k1]); >else < o.options[j++] = new Option(m, k,false,false); >> >else < s=(typeof(o)=='undefined'?document.createElement("input"):o); s.setAttribute('name', key); s.setAttribute('type', 'hidden');/*по умолчанию скрытый*/ if(typeof(o)=='undefined')obj.appendChild(s); o=ajaxObj[key]; for(k in o)s.setAttribute(k, o[k]); >>else if(typeof(o)!='undefined'&&typeof(o)!='null')< ajaxEval(o, ajaxObj[key]); >else if((pos=key.indexOf('.'))>0) < // имя.атрибут=значение o=key.substr(0,pos); o=obj[o]; if(typeof(o)!='undefined'&&typeof(o)!='null')< s=key.substr(pos+1); if(s=='disabled')o.disabled=ajaxObj[key]; else if(s=='value'&&o.tagName=='SELECT')< o.options.length = 0; t=ajaxObj[key]; s=''; if(o.name.substr(o.name.length-3,3)=='_cs')< s=eval('o.form.'+o.name.substr(0,o.name.length-3)); if(s)t=s.value; >o.options[0] = new Option(t, ajaxObj[key],true,true); if(s)if(o1=s.getAttribute('after'))eval(o1); >else o.setAttribute(s, ajaxObj[key]); > >else if(o=getObj(key))ajaxEval(o,ajaxObj[key]); > if(obj.style)obj.style.display='block'; > function ajaxCallBack(obj, ajaxObj, callback)< return function()< if(ajaxObj.readyState==4)< if(callback) if(!callback(obj,ajaxObj))return; if (ajaxObj.status==200)< //console.log(ajaxObj.responseText); if(ajaxObj.getResponseHeader("Content-Type").indexOf("application/x-javascript")>=0)< eval(ajaxObj.responseText.replace(/\n/g,";").replace(/\r/g,"")); >else if(ajaxObj.getResponseHeader("Content-Type").indexOf('json')>=0)< ajaxJson(obj,ajaxObj.responseText); >else updateObj(obj, ajaxObj.responseText); > else updateObj(obj, ajaxObj.status+' '+ajaxObj.statusText,1,1); > else if(ajaxObj.readyState==3&&ajaxObj.chat)obj.innerHTML=ajaxObj.responseText; > > var addEvent = (function() < if (document.addEventListener)< return function(obj, type, fn, useCapture)< if(!obj)console.error(obj, type, fn, useCapture); if(typeof(obj)!="object")obj=document.getElementById(obj); //console.log("addEvent:",obj,fn); if(obj)obj.addEventListener(type, fn, useCapture); >> else if (document.attachEvent) < // для Internet Explorer return function(obj, type, fn, useCapture)< if(typeof(obj)!="object")obj=document.getElementById(obj); obj.attachEvent("on"+type, fn); >> else < return function(obj, type, fn, useCapture)< if(typeof(obj)!="object")obj=document.getElementById(obj); obj["on"+type] = fn; >> >)(); function removeEvent(obj, eventType, handler) < if(obj&&typeof(obj)!="object")obj=document.getElementById(obj); return (obj.detachEvent ? obj.detachEvent("on" + eventType, handler) : ((obj.removeEventListener) ? obj.removeEventListener(eventType, handler, false) : null)); >function getEventTarget(e) < e = e || window.event; var target=e.target || e.srcElement; if(typeof target == "undefined")return e; // передали this, а не event if (target.nodeType==3) target=target.parentNode;// боремся с Safari return target; >>

Пример выбора города с использованием универсального скрипта выпадающих подсказок

В данном примере используется скрипт выпадающих подсказок autoComplete. Если Вы используете этот или аналогичный скрипт в других полях, то вам удобнее использовать его и для данного выбора. Так же в нем используется API htmlweb.ru

     Выбор города из выпадающего списка по начальным буквам   Выбор города из выпадающего списка по начальным буквам
 Введите город: 
 
 new autoComplete( < selector: 'input[name="city2"]', minChars: 2, delay: 500, source: function(term, response)< console.log('Ищем ',term); fetch('https://htmlweb.ru/json/geo/city_list?format=list&q='+encodeURIComponent(term) /* +'&api_key= взять здесь: https://htmlweb.ru/user/#allowDomain' */) .then( function(data)< // обрабатываем ответ от сервера if (data.status !== 200) < return Promise.reject(new Error(data.statusText)); >return data.json(); // раскодируем json в объект >) .then( function(data)< console.log('data:',data); if(data.limit)console.log('Осталось '+data.limit+' запросов'); if(data.error)document.getElementById('info').innerHTML=data.error; else if(data.message)document.getElementById('info').innerHTML=data.message; if(data.items) response(data.items); >) .catch( function(error) < console.error(error) >); >, onSelect: function(event, term, item) < document.getElementById('info').innerHTML='Выбран: '+term; >> ); 

Скрипт скачан здесь: https://htmlweb.ru/geo/city_api_example.php

Как сделать выбор региона и города как на сайте lamoda.ru?

Здравствуйте! Хочу реализовать вывод региона и города в верхней части сайта, так же, как на сайте lamoda.ru , с помощью Яндекс api я смог вывести регион и город посетителя автоматически, но эти данные не точные, прям до жути не точные, на lamoda.ru при нажатии на «Ваш регион доставки» появляется форма, в которой можно выбрать город и регион, и если, как реализовать появление самой формы я знаю, то как в ней отобразить строку, для ввода региона и страны, как на том сайте я понятия не имею, помогите пожалуйста, может есть скрипт какой-нибудь, или обучающая статья, направьте на верный путь, весь инет перерыл, очень надо. Вот, если надо, мой код авто вывода региона и города пользователя

 Ваш регион: "загрузка.."   Ваш город: "загрузка.."

Вопрос задан более трёх лет назад
4965 просмотров