Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Октябрь 2015   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

В платном разделе

В бесплатном разделе

Web-программирования: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Списки и раскрывающиеся списки"

 

 

Исходники к уроку можно скачать здесь.

Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS") и  Разработка сервиса сайта на PHP на примере партнерской программы).

 

Списки (независимо от того, обычный это или раскрывающийся список) в HTML задается тэгом <select></select>. Отдельный элемент списка задается тэгом <option></option>.  Если какой то элемент списка выбран по умолчанию, то его следует пометить атрибутом selected. Для того, что бы список был выпадающий, у него свойство size должно быть задано 1 или не задано. Если size больше единицы то это будет обычный список с полосами прокрутки (при необходимости). Свойство size задает количество строк списка, которые видно на экране.

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

<html>

    <head>

        <title>Урок 111. Java Script (JS): взаимодействие с пользователем</title>

    </head>

    <body>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function my_on_click() {

                alert("Вы выбрали элемент № "+myform.MyList.selectedIndex);

            }

        </SCRIPT>

        <form name="myform">

            <select name="MyList" size=1>

                <option>Первый элемент списка</option>

                <option selected>Второй элемент списка</option>

                <option>Третий элемент списка</option>

            </select>

            <input type="button" value="Submit" name="ButtonOk" onClick="my_on_click()">

        </form>

    </body>

</html>

 

 

В этом пример у на отображается выпадающий список, по умолчанию выбран второй элемент:

Web-программирования: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Списки и раскрывающиеся списки"

 

При нажатии на "стрелочку вниз" список раскрывается:

Web-программирования: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Списки и раскрывающиеся списки"

В программе обращаться к данному списку можно по его имени. Свойство selectedIndex (см. наш пример) возвращает номер выбранного элемента списка, счет идет с нуля:

Web-программирования: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Списки и раскрывающиеся списки"

Для того, что бы получить значение элемента списка, используем свойство value:

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function my_on_click() {

                alert("Вы выбрали элемент № "+myform.MyList.value);

            }

        </SCRIPT>

 

Если мы в нашем примере selectedIndex заменим на value, то получим вот такой результат:

Web-программирования: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Списки и раскрывающиеся списки"

Если значение явно не задано, то свойство value возвращает текст элемента, но можно значение задать явно:

            <select name="MyList" size=1>

                <option value="Это наше заданное значение">Первый элемент списка</option>

                <option selected>Второй элемент списка</option>

                <option>Третий элемент списка</option>

            </select>

 

Тогда свойство value вернет это явно заданное значение:

Web-программирования: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Списки и раскрывающиеся списки"

 

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

<html>

    <head>

        <title>Урок 111. Java Script (JS): взаимодействие с пользователем</title>

    </head>

    <body>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function my_on_click() {

                alert("Вы выбрали элемент № "+myform.MyList.value);

            }

        </SCRIPT>

        <form name="myform">

            <select name="MyList" size=4>

                <option value="Это наше заданное значение">Первый элемент списка</option>

                <option selected>Второй элемент списка</option>

                <option>Третий элемент списка</option>

                <option>Четвертый элемент списка</option>

                <option>Пятый элемент списка</option>

                <option>Шестой элемент списка</option>

                <option>Седьмой элемент списка</option>

            </select>

            <input type="button" value="Submit" name="ButtonOk" onClick="my_on_click()">

        </form>

    </body>

</html>

 

И вот результат его работы:

Web-программирования: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Списки и раскрывающиеся списки"

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.
В избранное