MultiSelect Component — sgcHTML | eSeGeCe

MultiSelect

TsgcHTMLComponent_MultiSelect — erzeugen Sie ein durchsuchbares Mehrfachauswahl-Dropdown mit Chips, gruppierten Optionen und Dataset-Bindung, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_MultiSelect

Ein Dropdown-Steuerelement, das seine Auswahl als Chips anzeigt. Fügen Sie Optionen hinzu (oder binden Sie ein Dataset), gruppieren Sie sie optional und begrenzen Sie die Auswahl, dann lesen Sie die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_MultiSelect

Rendert

Bootstrap-Dropdown + Chips (eigenständiges Widget)

Familie

Formulare & Eingaben

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Optionen hinzufügen, rendern

Setzen Sie Placeholder, FieldName und Size, fügen Sie Optionen mit AddOption hinzu (oder binden Sie mit LoadFromDataSet), dann lesen Sie HTML.

uses
  sgcHTML_Component_MultiSelect;

var
  oMulti: TsgcHTMLComponent_MultiSelect;
begin
  oMulti := TsgcHTMLComponent_MultiSelect.Create(nil);
  try
    oMulti.FieldName := 'tags';
    oMulti.Placeholder := 'Select tags';
    oMulti.MaxSelections := 3;
    oMulti.Size := mssLarge;

    oMulti.AddOption('js', 'JavaScript', True);
    oMulti.AddOption('py', 'Python');
    oMulti.AddOption('pas', 'Pascal');

    WebModule.Response := oMulti.HTML;   // dropdown + chips + hidden inputs
  finally
    oMulti.Free;
  end;
end;

// Or fill it straight from a dataset:
oMulti.LoadFromDataSet(qryTags, 'Code', 'Name', 'IsSelected');

// includes: sgcHTML_Component_MultiSelect.hpp

TsgcHTMLComponent_MultiSelect *oMulti = new TsgcHTMLComponent_MultiSelect(NULL);
try
{
  oMulti->FieldName = "tags";
  oMulti->Placeholder = "Select tags";
  oMulti->MaxSelections = 3;
  oMulti->Size = mssLarge;

  oMulti->AddOption("js", "JavaScript", true);
  oMulti->AddOption("py", "Python");
  oMulti->AddOption("pas", "Pascal");

  String html = oMulti->HTML;   // dropdown + chips + hidden inputs
}
__finally
{
  delete oMulti;
}

using esegece.sgcWebSockets;

var multi = new TsgcHTMLComponent_MultiSelect();
multi.FieldName = "tags";
multi.Placeholder = "Select tags";
multi.MaxSelections = 3;
multi.Size = TsgcHTMLMultiSelectSize.mssLarge;

multi.AddOption("js", "JavaScript", true);
multi.AddOption("py", "Python");
multi.AddOption("pas", "Pascal");

string html = multi.HTML;   // dropdown + chips + hidden inputs

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Optionen

Options ist eine Sammlung von TsgcHTMLMultiSelectOption (jede mit Value, Text, Selected, Disabled und Group).

Optionen hinzufügen

AddOption(aValue, aText, aSelected) fügt einen einzelnen Eintrag hinzu; gruppierte Einträge teilen sich denselben Group-Wert und werden unter einer Dropdown-Überschrift dargestellt.

Dataset-Bindung

LoadFromDataSet(aDataSet, aValueField, aTextField, aSelectedField) leert Options und füllt es neu aus einer Abfrage.

Suche

ShowSearch (Standard True) fügt ein Filterfeld innerhalb des Dropdowns hinzu; SearchPlaceholder und NoResultsText überschreiben dessen Beschriftungen und greifen sonst auf die aktive Locale zurück.

Grenzen & Größe

MaxSelections begrenzt, wie viele Chips gleichzeitig gewählt werden können (0 bedeutet unbegrenzt); Size (mssDefault, mssSmall, mssLarge) entspricht der Größensteuerung von Bootstraps form-select.

Wert übertragen

FieldName rendert pro ausgewählter Option ein verstecktes <input>, sodass das Formular jeden Wert postet; MultiSelectID setzt die Element-ID.

Ressourcen

Weiter entdecken

	Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente.	Öffnen
	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen