Форма выпадающего меню кодируется следующим образом:
<select id="mymenu" >
<option>Google</option>
<option>Яндекс</option>
<option>Почта</option>
<option>Рамблер</option>
</select>Элемент option содержит значения выпадающего списка.
Порою может быть необходимо сделать так чтобы это выпадающее меню играло роль меню навигации. То есть при выборе определённой опции мы перемещались бы на соответствующую страницу. Конечно, такой вид навигации не должен быть основным, но в некоторых случаях как дополнительный этот вид навигации может быть довольно кстати.
Итак, приступаем к кодингу. Как и большинство поставленных задач в программировании эта задача может быть решена разными путями. Рассмотрим один из них. Перво-наперво зададим значение value для каждой опции выпадающего меню, этим значением будет URI соответствующей страницы, на которую должен осуществиться переход в случае выбора данной опции.
<select id="mymenu" >
<option value="http://google.ru">Google</option>
<option value="http://yandex.ru">Яндекс</option>
<option value="http://mail.ru">Почта</option>
<option value="http://rambler.ru">Рамблер</option>
</select>Теперь вспомним про обработчики событий в JavaScript. Можно, используя обработчик onchange (при изменении), привязать его к элементу select и сделать так, что при изменении пункта в выпадающем меню автоматически происходил бы переход на нужную страницу. Тогда код формы, заключенный в теги <body></body> будет выглядеть так:
<form id="myform">
<select id="mymenu" onchange = "window.location=document.forms[0].mymenu.options[document.forms[0].mymenu.selectedIndex].value" />
<option value="http://google.ru">Google</option>
<option value="http://yandex.ru">Яндекс</option>
<option value="http://mail.ru">Почта</option>
<option value="http://rambler.ru">Рамблер</option>
</select>
</form>
Но это может сбить пользователя с толку, к тому же, придется добавить перед <option value="http://google.ru">Google</option> еще одну строку (она будет первой в выпадающем списке):
<option value="#">Выберите пункт назначения</option>Пользователь увидит:
Лучше мы сделаем кнопку, при нажатии на которую произойдёт переход. Иными словами переход не будет автоматическим. Пользователь выберет нужный пункт в выпадающем меню, затем нажмёт кнопку и произойдёт переход. Для этого будем использовать событие onclick (при нажатии) привязав его к элементу input.
Для самого же главного, смены URI текущего окна будем использовать замену значения объекта Location, который принадлежит объекту Window, то есть окну нашего браузера. Изменение URI этого объекта приведет к тому, что браузер начнёт загружать вместо текущего адреса окна страницу, которая содержится по нужному нам адресу. При клике на кнопку адрес должен измениться. В итоге всё будет выглядеть следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<link rel="stylesheet" type="text/css" href="/style.css" media="all" />
</head>
<body>
<form id="myform" >
<select id="mymenu" >
<option value="http://google.ru">Google</option>
<option value="http://yandex.ru">Яндекс</option>
<option value="http://mail.ru">Почта</option>
<option value="http://rambler.ru">Рамблер</option>
</select>
<input type="button" value="Перейти" onclick = "window.location=document.forms[0].mymenu.options[document.forms[0].mymenu.selectedIndex].value" />
</form>
</body>
</html>
forms[0] – порядковый номер формы. Она первая. Нумерация с нуля. Если она не первая (когда на странице несколько форм), нужно изменить. Возможно, лучше использовать доступ по id через document.getElementById[значение id]
document.forms[0].mymenu.options[document.forms[0].mymenu.selectedIndex].value – такое длинное значение потому что сначала получаем доступ к массиву (коллекции) options, а затем к выбранному из выпадающего списка пункта через selectedIndex, а потом к свойству value
Не запутайтесь с кавычками, пожалуйста. document.forms[0].mymenu.options[document.forms[0].mymenu.selectedIndex].value возвращает уже строку, её не нужно помещать в одинарные кавычки.
Вот что у нас получилось:
Если список слишком велик, можно ограничить размер окна атрибутом size тега select, в этом случае, если список превысит высоту окна, будет показана полоса прокрутки. В Google Chrome заданные размеры списка игнорируются. Код списка с полосой прокрутки и кнопкой:
<form id="myform" >
<select id="mymenu" size="3">
<option value="http://google.ru">Google</option>
<option value="http://yandex.ru">Яндекс</option>
<option value="http://mail.ru">Почта</option>
<option value="http://rambler.ru">Рамблер</option>
</select>
<input type="button" value="Перейти" onclick = "window.location=document.forms[0].mymenu.options[document.forms[0].mymenu.selectedIndex].value" />
</form>Выглядит так:
Ширину и высоту окна можно задать и в style="width: 200px; height: 60px;" тега select (по умолчанию ширина выравнивается по самому длинному слову в списке), такое задание размеров окна понимает и Google Chrome:
Открытие url в новом окне
Чтобы открыть выбранный url в новом окне, применяют метод window.open:
<form name="menuform">
<select name="menu3"
onChange="window.open(menuform.menu3.options[menuform.menu3.selectedIndex].value);
return false;">
<option value="http://google.ru" selected>Гоша</option>
<option value="http://yandex.ru">Яша</option>
<option value="http://rambler.ru">Рома</option>
</select>
</form>
Работает так
Вы можете контролировать функциональность и размеры окна, например так:
window.open(menuform.menu3.options[menuform.menu3.selectedIndex].value,'URLwindow','width=400,height=200'); А кнопку при необходимости вставляем так же, как описано выше.
gorin.nik2015@yandex.ru