Меню с select javascript

JavaScript урок13. Объектная модель документа (продолжение) и идентификация

На уроке рассматривается работа в javascript с выпадающим списком select и отдельными пунктами списка. Разбирается событие onresize объекта window и свойства объектов outerHTML и innerHTML в javaScript

Событие javascript onresize объекта window

Событие onresize объекта window ответственно за изменение размеров окна браузера. Поэтому событие и принадлежит объекту окно — window .

Поскольку среди элементов html нету тега, отождествленного с окном браузера, то обработать в javascript событие onresize можно при помощи присваивания функции свойству объекта window.

Пример: Написать скрипт, который при изменении размера окна вызывает сообщение «Размер окна изменен!»

window.onresize = message; function message() { alert("Размер окна изменен!"); }

window.onresize = message; function message()

window.onresize = function message() {alert("Размер окна изменен!");}

window.onresize = function message()

body>пожалуйста, измените размер этого окна.

пожалуйста, измените размер этого окна.

Объект javascript выпадающий список — select

Объект select — выпадающий список — предоставляет список значений для выбора. Выбор может быть как одного пункта, так и нескольких пунктов сразу. Это сложный объект, обращение к которому в скрипте происходит и как к объекту select , и как к его пункту option .

• length — количество пунктов списка
• name — атрибут name
• options[] — массив пунктов
• selectedIndex — индекс выбранного пункта option
• defaultSelected — выбранный пункт option по умолчанию
• selected — выбранный пункт

Получить значение выпадающего списка (select) в javascript можно через свойство value . Но есть и другие способы.

Пример: Разместить выпадающий список из трех пунктов — гороов: Москва, Санкт-Петербург, другой. По щелчку на кнопке получить значение свойства value выбранного option (пункта) списка и вывести его на экран

form name="f1"> Город:br> select name="town" id="s1"> option value="msk" >Москва/option> option value="spb">Санкт-Петербург/option> option value="other">другой/option> /select> input type="button" onclick="f()" value="ok"> /form>

Идентификация значения списка:

function f(){ let a=document.getElementById('s1').value; alert(a); // "msk", если выбрана Москва }

Задание js13_1. При изменении пункта списка добавлять в текстовое поле текст из выбранного пункта меню (option).

• Добавьте текстовое поле и список select с четырьмя пунктами option с текстом.
• В открывающий тег select добавьте обработчик события onchange .
• Отождествите обработчик события onchange с функцией, изменяющей текст в текстовом поле (в текстовое поле поместите значение выбранного пункта меню).

function check() { document.getElementById('t1').value= . ; }

input type="text" id="t1"> br> select id="menu1" onchange=". "> option value="1">1/option> option value="2">2/option> option value="3">3/option> /select>

Задание js13_2. Создать страницу проверки знаний учащегося с вопросом: «В каких единицах измерения измеряется работа?» и двумя ответами: «Моль» (неправильный) и «Джоуль» (правильный), выполненными в виде элемента меню со списком ( select ). Функцию проверки запускать по щелчку кнопки

Рассмотрим пример использования свойства объекта select — selectedIndex — выбранный пункт option:

form> Автозавод: select name="s0" onChange="form.elements[1].value=selectedIndex;"> option>ГАЗ option>ВАЗ /select> Выбрали индекс: input type="text" size="1" maxlength="1"> /form>

В данном примере при изменении пункта меню генерируется событие onChange . В качестве значения атрибута onChange выполняется скрипт: происходит обращение к текстовому полю через массив элементов формы (текстовое поле — это первый элемент массива, т.к. 0-й элемент — это выпадающий список select). В качестве значения текстового поля указывается номер выбранного пункта списка ( selectedIndex ).

Объект javascript option — пункт меню

Пункт меню select в javascript — option — рассматривается как отдельный объект со своими свойствами:

• text — строка текста, которая размещается в контейнере LI
• value — значение, которое передается серверу при выборе альтернативы, связанной с объектом OPTION
• selected — альтернатива выбрана(true/false)

Доступ к конкретному пункту меню происходит через коллекцию (массив) options:

form name="f1"> select name="s1"> option value="1">1/option> option value="2">2/option> option value="3">3/option> /select>

Скрипт доступа к первому пункту выпадающего меню (нулевой элемент массива options ):

Задание js13_3. По щелчку на кнопке менять свойство text и value для первого пункта меню в значение «Ростов-на-Дону». Дополните код:

function myFunc(){ document.f1.s1.options[0]. =. ; . ; }

form name="f1"> select name="s1"> option value="Ростов Дон">Ростов-Дон/option> option value="Владимир">Владимир/option> option value="Москва">Москва/option> /select> input type="button" onClick=". "> /form>

Рассмотрим пример использования свойства text объекта option:

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

form> select id="s1" onChange="document.getElementById('t1').value= document.getElementById('s1').options[document.getElementById('s1').selectedIndex].text;"> option>ГАЗ option>ВАЗ /select> input type="text" id="t1"> /form>

Рассмотрим еще одно решение с использованием списка множественного выбора:

Пример: При изменении списка множественного выбора в текстовое окно выводить индексы выбранных альтернатив
(установить для списка атрибут multiple )

form> Набор канцелярских товаров: select onChange="form.elements[1].value=''; for(i=0;i <6;i++) if(form.elements[0].options[i].selected==true)form.elements[1].value = form.elements[1].value+i;" multiple> option>Карандаши option>Авторучки option>Линейки option>Тетради option>Стерки option>Кнопки /select> Выбраны позиции: input name="s1" size="7" maxlength="7"> /form>

Задание js13_4. Выполните рассмотренный выше пример, дополнив его использованием функции

Свойства outerHTML и innerHTML в javaScript

innerHTML в javaScript — это директива для формирования или замены содержимого какого-либо элемента.
Рассмотрим выполненный пример:

p onclick="this.innerHTML='измененный текст'">изменяемое содержимое/p>

outerHTML в javaScript — это директива для формирования или замены содержимого какого-либо элемента вместе с самим элементом.
Пример:

Пример: По щелчку на абзац (тег p) изменять содержимый текст данного тега и выполнять центрирование текста в нем

p onclick="this.outerHTML=' измененный текст/p>'">изменяемое содержимое/p>

Источник

Как сделать — Кликабельный выпадающий список

Узнать, как создать интерактивное выпадающее меню с помощью CSS и JavaScript.

Выпадающий

Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:

Создание кликабельного выпадающего списка

Создайте выпадающее меню, которое появляется, когда пользователь нажимает на кнопку.

Шаг 1) Добавить HTML:

Пример

Объяснение примера

Используйте любой элемент, чтобы открыть выпадающее меню, например элемент , или

.

Используйте элемент контейнера (например, ), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.

Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.

Шаг 2) Добавить CSS:

Пример

/* Кнопка выпадающего списка */
.dropbtn background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>

/* Кнопка выпадающего меню при наведении и фокусировке */
.dropbtn:hover, .dropbtn:focus background-color: #2980B9;
>

/* Контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>

/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover

/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show

Объяснение примера

Мы разработали выпадающую кнопку с фоновым цветом, дополнением, эффектом наведения и т.д.

Класс .dropdown использует position:relative , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute ).

Класс .dropdown-content класс содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание в min-width установлено значение 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина выпадающего контента, чтобы быть так велик, как в раскрывающееся меню, установить width на 100% (и overflow:auto , чтобы включить прокрутку на маленьких экранах).

Вместо использования границы мы использовали свойство box-shadow , чтобы сделать выпадающее меню похожим на»карточку». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.

Шаг 3) Добавить JavaScript:

Пример

/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>

// Закройте выпадающее меню, если пользователь щелкает за его пределами
window.onclick = function(event) if (!event.target.matches(‘.dropbtn’)) var dropdowns = document.getElementsByClassName(«dropdown-content»);
var i;
for (i = 0; i < dropdowns.length; i++) var openDropdown = dropdowns[i];
if (openDropdown.classList.contains(‘show’)) openDropdown.classList.remove(‘show’);
>
>
>
>

Источник