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

Автор: | 15.06.2013

Давайте научимся создавать выпадающие списки с возможность включать в них активные ссылки. Таким образом, выбрав необходимый пункт, посетитель вашего сайта сможет перейти по ссылке, ассоциированной с этим пунктом.

Нижеприведенный способ отлично подходит для создания элемента навигации по сайту или же как способ выбора альтернативной языковой/географической версии сайта.

В начале вставим в код страницы скрипт, написанный на языке JavaScript, который будет отвечать за переход.

В третьей сточке у нас указывается имя функции (“linklist” в данном случае), которое можно задать произвольно, главное чтобы не странице не существовало ещё одной функции с таким же именем.

Далее вставляем сам код выпадающего списка.

Имя формы (<form name=”имя_формы”>) и имя списка (<form name=”имя_списка” … >) указываются произвольными, главное чтобы были уникальными. Самое важное – не напутать их в параметрах вызова нашей функции перехода. Прописывается вызов в атрибутах списка (вторая строчка):

onChange=”имя_функции(document.имя_формы.имя_списка)”

В нашем случае onChange=”linklist(document.menu.sel)”

Если прописать тэгу элемента (<option>)списка атрибут target=”new”, то ссылка будет открываться в новом окне (пятая строчка).

В атрибуте title=”…” указываем всплывающую подсказку для ссылки (точно так же, как для тэга <a>).

Так же можно сделать, чтобы переход по ссылке осуществлялся не сразу, а после нажатия кнопки. Скрипт остается тем же самым:

А в коде списка меняем событие OnChange на OnClick

Ну и конечно же смотрим, чтобы на одной странице не было функций, форм и списков с одинаковыми именами.

И ещё, визуальные редакторы Joomla режут JavaSrcipt, по этому необходимо сохранять материал с этим списком в режиме “Без редактора”.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

  1. Юрий

    Подскажите, а как сделать так, чтобы отображался не один выпадающий список, а, например, два зависящих друг от друга? Например, страна – город. Выбираем в первом страну – во второй подтягиваются принадлежащие ей города. И уже после выбора в последнем списке значения осуществляется переход.

  2. Евгений

    Да, действительно хотелось узнать как сделать два списка по этому принципу

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.