Select Component — sgcHTML | eSeGeCe

Select

TsgcHTMLComponent_Select — a Bootstrap 5 select dropdown with optgroups, multiple selection, sizing and dataset binding, in Delphi, C++ Builder and .NET.

TsgcHTMLComponent_Select

A dropdown that emits a labelled Bootstrap form-select. Add options (or bind a dataset), optionally group them and allow multiple selection, then read the HTML property.

Component class

TsgcHTMLComponent_Select

Renders

Bootstrap 5 form-select

Languages

Delphi, C++ Builder, .NET

Create it, add options, render it

Set Name, Label_ and a Placeholder, add options with AddOption (or AddOptionGroup), then read HTML (or drop it into a TsgcHTMLTemplate_Bootstrap page).

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

Key properties & methods

The members you reach for most often.

Options

Options is a collection of TsgcHTMLSelectOption (each with Value, Text, Selected, Disabled and Group); the convenience methods AddOption(value, text, selected) and AddOptionGroup(group, value, text) fill it.

Identity

Name sets the field name, Label_ the caption, Placeholder a disabled lead option and SelectID the element id (defaults to sel_<Name>).

Selection mode

Multiple turns it into a multi-select list and VisibleItems sets how many rows show at once (the size attribute).

Sizing

Size is a TsgcHTMLSelectSizessDefault, ssSmall or ssLarge.

Dataset binding

LoadFromDataSet(aDataSet, aValueField, aTextField, aGroupField) fills the options from a query, building <optgroup>s when a group field is supplied; assign DataSource for live refresh.

State & output

Required and Disabled flag the control; HTML returns the labelled <select> with all options and optgroups.

Keep exploring

Online HelpFull API reference and usage guide for this component.
All sgcHTML ComponentsBrowse the full feature matrix of 80+ components.
Download Free TrialThe 30-day trial ships the 60.HTML demo projects.
PricingSingle, Team and Site licenses with full source code.
Best value: All-AccessEvery eSeGeCe product, Premium Support included, from €1,059/year.
See All-Access pricing

Ready to Get Started?

Download the free trial and start building web UIs in Delphi, C++ Builder and .NET.