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

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

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

1
2
3
4
5
6
7
8
9
10
11

<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>

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

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

1
2
3
4
5
6
7
8
9

<form name="menu">
<select name="sel" onChange="linklist(document.menu.sel)">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)" 
        value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
</select>
</form>

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11

<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>

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

<form name="menu">
<select name="sel">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)" 
        value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
<input type="button" value="Переход" onClick="linklist(document.menu.sel)">
</select>
</form>
 

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

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