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

@kmaffa · Регистрация: 29.10.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Помогите реализовать следующее:
На странице разместить ссылку

HTML5
1
<a id="AddCity" href="http://mysite.com">Добавить город</a>

При нажатии на ссылку открыть новое окно с перечнем городов "Александров, Владимир, Гороховец, Гусь-Хрустальный"
выбрать город, закрыть окно и вместо первоначальной ссылки написать выбранный город.
Заранее благодарю.

@BANO · 27.06.2016, 10:54

kmaffa, какие наработки у вас уже есть?

@kmaffa · 27.06.2016, 12:42 **[ТС]**

Начал изучать JS https://learn.javascript.ru. Читаю про переменные и особенности языка. Пока что понял, что для работы с объектами (тегами) необходимо их как то идентифицировать например по id.
Пока что это все что удалось выяснить. Времени мало, поэтому прошу помощи.

@kalabuni · 27.06.2016, 13:04

kmaffa, для начала определитесь -- какой именно выпадающий список вас интересует: <select>, <datalist> или просто "плоский" список городов в окне?

@kmaffa · 27.06.2016, 13:26 **[ТС]**

Даталист не желательно. Список, где каждый город будет с новой строки.

@kalabuni · 27.06.2016, 13:58

kmaffa,определитесь конкретно: какой именно, без сомнений и колебаний
а то ведёте себя как новичок в публичном доме -- "желательно", "не желательно"

@kmaffa · 27.06.2016, 14:53 **[ТС]**

Примерно как на картинке, ссылка при нажатии на которую отображается список. (Данный список сделан с помощью функции alert.) При нажатии на город, окно должно закрыться, а вместо ссылки появиться наименование выбранного города.

@kalabuni · 27.06.2016, 18:03

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
onload=function ()
    {
    var lis = document.getElementById ('mySel').getElementsByTagName ('LI');
    for (var j = 0, J = lis.length; j <J; j++)
        lis [j].onclick = function ()
            {
            document.getElementById ('myLink').innerHTML = this.innerHTML;
            document.getElementById ('mySel'). style.display = 'none';
            }
    document.getElementById ('myLink').onclick = function (e)
        {
        var e = e ||window.event;
        if (e.preventDefault) e.preventDefault (); else e.returnValue = false;
        if (this.innerHTML != 'Добавить город') return
    document.getElementById ('mySel'). style.display = '';
        }
    }

https://jsfiddle.net/hx2sor99/43/

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	27.06.2016, 10:54
	kmaffa, какие наработки у вас уже есть? 0

@kmaffa 338 / 327 / 154 Регистрация: 29.10.2012 Сообщений: 949
	27.06.2016, 12:42 [ТС]
	Начал изучать JS https://learn.javascript.ru. Читаю про переменные и особенности языка. Пока что понял, что для работы с объектами (тегами) необходимо их как то идентифицировать например по id. Пока что это все что удалось выяснить. Времени мало, поэтому прошу помощи. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	27.06.2016, 13:04
	kmaffa, для начала определитесь -- какой именно выпадающий список вас интересует: <select>, <datalist> или просто "плоский" список городов в окне? 0

@kmaffa 338 / 327 / 154 Регистрация: 29.10.2012 Сообщений: 949
	27.06.2016, 13:26 [ТС]
	Даталист не желательно. Список, где каждый город будет с новой строки. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	27.06.2016, 13:58
	kmaffa,определитесь конкретно: какой именно, без сомнений и колебаний а то ведёте себя как новичок в публичном доме -- "желательно", "не желательно" 0

@kmaffa 338 / 327 / 154 Регистрация: 29.10.2012 Сообщений: 949
	27.06.2016, 14:53 [ТС]
	Примерно как на картинке, ссылка при нажатии на которую отображается список. (Данный список сделан с помощью функции alert.) При нажатии на город, окно должно закрыться, а вместо ссылки появиться наименование выбранного города. Миниатюры 0

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

Решение