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

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

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


Содержание:

Событие javascript onresize объекта window window.onresize = … ;

window.onresize = … ;

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

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

Рассмотрим на примере:

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


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

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

либо так:

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

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

HTML-код:

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

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

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

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

Свойства объекта select:

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

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

Рассмотрим пример:

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

<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(){ var a=document.getElementById('s1').value; alert(a); }

function f(){ var a=document.getElementById('s1').value; alert(a); }

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

Подробно:

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

Дополните код:


select javascript
Скрипт: function check() { document.getElementById('t1').value= ...; }

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

HTML-код:

<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>

<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). Функцию проверки запускать по щелчку кнопки
javascript значение select

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

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

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

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

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

document.f1.s1.options[0]. ...

document.f1.s1.options[0]. ...

Задание js13_3. По щелчку на кнопке менять свойство text и value для первого пункта меню в значение «Ростов-на-Дону». Дополните код:
Скрипт: function myFunc(){ document.f1.s1.options[0]....=...; ...; }

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

HTML-код:

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

<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>

<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)
javascript selected value <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>

<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) изменять содержимый текст данного тега

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

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

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

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

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

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

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

Тоже читают:



Схема прикорма союз педиатров россии

Декорирование вытяжки своими руками

Вязанный кардиган для женщин спицами по схеме

Схемы отопления в доме с газовым котлом

Прически на средний волос накрутить