Select コンポーネント — sgcHTML

概要

TsgcHTMLComponent_Select

ラベル付きの Bootstrap form-select を出力するドロップダウンです。オプションを追加し（またはデータセットをバインドし）、任意でそれらをグループ化して複数選択を許可してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Select

レンダリング内容

Bootstrap 5 の form-select

ファミリー

フォーム & 入力

言語

Delphi, C++ Builder, .NET

クイックスタート

作成し、オプションを追加し、レンダリングする

Name、Label_、Placeholder を設定し、AddOption（または AddOptionGroup）でオプションを追加してから、HTML を読み取ります（または TsgcHTMLTemplate_Bootstrap ページに組み込みます）。

uses
  sgcHTML_Enums, sgcHTML_Component_Select;

var
  oSelect: TsgcHTMLComponent_Select;
begin
  oSelect := TsgcHTMLComponent_Select.Create(nil);
  try
    oSelect.Name := 'country';
    oSelect.Label_ := 'Country';
    oSelect.Placeholder := 'Select a country';
    oSelect.Size := ssLarge;

    oSelect.AddOption('es', 'Spain', True);
    oSelect.AddOption('fr', 'France');
    oSelect.AddOptionGroup('Americas', 'us', 'United States');

    WebModule.Response := oSelect.HTML;   // Bootstrap form-select
  finally
    oSelect.Free;
  end;
end;

// Or fill it straight from a dataset:
oSelect.LoadFromDataSet(qryCountries, 'Code', 'Name', 'Region');

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Select.hpp

TsgcHTMLComponent_Select *oSelect = new TsgcHTMLComponent_Select(NULL);
try
{
  oSelect->Name = "country";
  oSelect->Label_ = "Country";
  oSelect->Placeholder = "Select a country";
  oSelect->Size = ssLarge;

  oSelect->AddOption("es", "Spain", true);
  oSelect->AddOption("fr", "France");
  oSelect->AddOptionGroup("Americas", "us", "United States");

  String html = oSelect->HTML;   // Bootstrap form-select
}
__finally
{
  delete oSelect;
}

using esegece.sgcWebSockets;

var select = new TsgcHTMLComponent_Select();
select.Name = "country";
select.Label_ = "Country";
select.Placeholder = "Select a country";
select.Size = TsgcHTMLSelectSize.ssLarge;

select.AddOption("es", "Spain", true);
select.AddOption("fr", "France");
select.AddOptionGroup("Americas", "us", "United States");

string html = select.HTML;   // Bootstrap form-select

リファレンス

主なプロパティとメソッド

最もよく使うメンバーです。

Options

Options は TsgcHTMLSelectOption のコレクションです（各項目は Value、Text、Selected、Disabled、Group を持ちます）。便利メソッドの AddOption(value, text, selected) と AddOptionGroup(group, value, text) がこれを埋めます。

Identity

Name はフィールド名を、Label_ はキャプションを、Placeholder は無効な先頭オプションを、SelectID は要素 id（既定値は sel_<Name>）を設定します。

Selection mode

Multiple はこれを複数選択リストに変え、VisibleItems は一度に表示する行数（size 属性）を設定します。

Sizing

Size は TsgcHTMLSelectSize です — ssDefault、ssSmall、ssLarge。

Dataset binding

LoadFromDataSet(aDataSet, aValueField, aTextField, aGroupField) は、クエリからオプションを埋め、グループフィールドが指定されると <optgroup> を構築します。ライブ更新には DataSource を割り当てます。

State & output

Required と Disabled はコントロールにフラグを立てます。HTML は、すべてのオプションと optgroup を含むラベル付きの <select> を返します。

リソース

さらに詳しく

	すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く

Select