Форма меню, що випадає кодується таким чином:
Елемент option містить значення списку.
Часом може бути необхідно зробити так щоб це меню, що випадає грало роль меню навігації. Тобто при виборі певної опції ми переміщалися б на відповідну сторінку. Звичайно, такий вид навігації не повинен бути основним, але в деяких випадках як додатковий цей вид навігації може бути досить до речі.
Отже, приступаємо до КОДІНГ. Як і більшість поставлених завдань в програмуванні це завдання може бути вирішена різними шляхами. Розглянемо один з них. Насамперед поставимо значення value для кожної опції меню, що випадає, цим значенням буде URI відповідної сторінки, на яку повинен здійснитися перехід в разі вибору даної опції.
Краще ми зробимо кнопку, при натисканні на яку відбудеться перехід. Іншими словами перехід не буде автоматичним. Користувач вибере потрібний пункт у випадаючому меню, потім натисне кнопку і відбудеться перехід. Для цього будемо використовувати подія onclick (при натисканні) прив'язавши його до елементу input.
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 задані розміри списку ігноруються. Код списку з смугою прокрутки і кнопкою:
Ширину і висоту вікна можна задати і в style = "width: 200px; height: 60px;" тега select (за замовчуванням ширина вирівнюється по найдовшому слову в списку), таке завдання розмірів вікна розуміє і Google Chrome:
Відкриття url в новому вікні
Щоб відкрити вибраний url в новому вікні, застосовують метод window.open:
Ви можете контролювати функціональність і розміри вікна, наприклад так:
А кнопку при необхідності вставляємо так само, як описано вище.