Элемент управления javascript выпадающий список

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

К оглавлению

Содержание:

Событие javascript onresize объекта window
Объект javascript выпадающий список — select
- Объект javascript option — пункт меню
Свойства 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 = function message() {alert("Размер окна изменен!");}

HTML-код:

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

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

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= ...;
}

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>

Задание 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):

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

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

Скрипт:

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>

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

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

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

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

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

К оглавлению

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

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

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

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

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

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