Главная страница \ Статьи \ TWebBrowser \ Поля выбора

Поля выбора

В этой статье я хочу затронуть некоторые моменты работы с элементами страницы типа SELECT. Эти элементы отвечают за выбор значений и аналогичны компонентам ComboBox и ListBox.

Поиск элемента

Для начала хочу остановится на том, что поиск элемента SELECT не идентичен поиску элемента INPUT. Это можно увидеть в функции инициализации: ...
  if(Doc.All.Item(i).tagName='SELECT')then
...

Немного о размере

Также у этого поля функции переменной Size несколько отличны от полей INPUT. У поля SELECT атрибут Size отвечает за количество отображаемых строк: 1 - "ComboBox", >1 - "ListBox". Тип этого поля так и остался integer. Атрибут доступен для чтения и записи var I:Integer;
{Чтение}
I:=Select.size;
{Запись}
Select.size:=I;

Фокус ввода

Фокус устанавливается также как и у полей INPUT: Select.focus();

Хранение данных

Данные поля (строки и значения строк) хранятся как и у стандартных ComboBox'ов и ListBox'ов в списке. Имя этого списка: options. В этом списке содержатся элементы типа option (подробнее о них можете почитать в MSDN, адрес ниже). Доступ к элементам списка осуществляется через функцию Item(Index:Integer), например, Select.options.item(12) - вернет 13-ый элемент списка.

Количество элементов можно получить из атрибута length:Integer Select.options.length;

Читать/писать информацию о элементах списка можно читать в цикле: var i:integer;
for i:=0 to Select.options.length-1 do
  begin
{Текст элемента (то, что отображается в качестве названия)}
    ...:=Select.options.item(i).innerText;
{Значение (то, что скрыто от пользователя и используется как значение поля при выборе)}
    ...:=Select.options.item(i).value;
  end;

Добавление элемента осуществляется с помощью функции add(oElement [, iIndex:Integer]). Обязательный параметр - элемент документа для добавления, необязательный - индекс, куда необходимо вставить элемент (аналогично Insert у ComboBox). var item,document:Variant;
...
document:=WebBrowser1.Document;
{Создание элемента в памяти}
item:=document.createElement('OPTION');
{Добавление элемента в список}
Select.options.add(item);
{Установка текста элемента}
item.innerText := 'Текст';
{Установка значения элемента}
item.value := 'SomeValue';
...

Удаление осуществляется с помощью функции remove(Index:Integer) аналогичной функции Delete у ComboBox. Select.remove(0);

Получение значения поля

Значение поля, которое будет передано на сервер, можно получить через свойство value:String. ...:=Select.value;

Также можно воспользоваться свойство selectedIndex:Integer (если в поле можно выбрать только 1 элемент): ...:=Select.options.item(Select.selectedIndex).value;

Если же разрешено выбрать несколько элементов поля, тогда проверить значения можно в цикле: var i:integer;
for i:=0 to Select.options.length-1 do
  begin
{Если элемент выбран, то что-то делаем}
    if Select.options.item(i).selected then
      ...
  end;

Определить, разрешен ли выбор нескольких элементов или нет, можно с помощью свойства multiple. Если оно true - разрешен, false - нет. if Select.multiple then
...
Либо:
Select.multiple:=true; //Разрешить
Select.multiple:=false; //Запретить

Замечание

Если Вы хотите удалять элементы в цикле, то Вам следует удалять их в обратном порядке. Например, если Вам необходимо удалить все выбранные строки (разрешен выбор нескольких строк), то следует удалять их так: var i:integer;
for i:=0 to Select.options.length-1 do
  begin
{Если элемент выбран, то удаляем}
    if Select.options.item(i).selected then
      Select.options.remove(i);
  end;

Заключение

Продолжение следует!..

Пример (2.62Кб) Скачать
Powered by Elise