Все выпуски  

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


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

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

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

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

 

 

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

 

На прошлом уроке мы изучали обычные и раскрывающиеся списки. Сегодня изучим списки с мыльтивыбором. Для того, что бы превратить список в список с мультивыбором, надо указать атрибут multiple в тэге select. Естественно, данный атрибут имеет смысл только для обычных списков (в раскрывающемся списке мы не сможем выбрать несколько элементов). Как выбираются элементы в списке? Можно кликать по ним мышкой с нажатой на клавиатуре клавишей Ctrl. Еще можно выделить несколько элементов, удерживая Shift и нажимая на клавиши управления курсором:

 

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

Как обратиться к выделенным элементам? Можно перебрать все элементы массива options и проверить, какие элементы выбраны:

<html>

    <head>

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

    </head>

    <body>

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

            function my_on_click() {

                s="";

                for(i=1; i<=myform.MyList.options.length; i++) {

                    s=s+i+" - "+myform.MyList.options[i-1].selected+"; ";

                }

                alert(s);

             }

        </SCRIPT>

        <form name="myform">

            <select name="MyList" size=4 multiple>

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

 

Можно также программно менять выделение элементов списка:

            function my_on_click_1() {

                myform.MyList.options[1].selected = true

                myform.MyList.options[2].selected = true

                myform.MyList.options[3].selected = false

            }

 

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


В избранное