SelectBox Dokumentation

Beschreibung:

Das Widget soll eine Optionswahl ermöglichen, mit single- oder multiple select, Label und value setzen oder auslesen, Placeholder definieren, Label (un)sichtbar machen.

Initialisierung:

        interface SelectBoxEntry {
        node: HTMLOptionElement;
        isSelectable: boolean;
        value: string;
        label: string;
        }
        

        // eine leeere SelectBox
        var select = new SelectBox();

        select.on("valueChange", function (value) { console.log("select changed", value); });

        // Optionen definieren
        select.addEntry("a", "erste Option A", true);
        select.addEntry("b", "zweite Option B", true);
        select.addEntry("c", "nicht auswählbar", false);
        select.addEntry("d", "D");
        select.addEntry("e", "E");
        select.addEntry("f", "F");
        select.addEntry("g", "G");

        // Label definieren
        select.setLabel("Select Label :)");


        select.setBlankOption("XXX", "bitte nicht wählen!");

        this.selectBox = select;

        // constructOptions() wird im startup() aufgerufen damit eine Instanziierung im Markup möglich wird
        select.startup();

        this.UiModder.domConstruct.place(select.domNode, this.selectboxContainer);
        

oder im Markup:

Public Properties:

isReadonly: boolean = false;
isMultiSelect: boolean = false;

multiple: {
active: boolean;
minCount: number;
maxCount: number;
currentSelect: Array<SelectBoxEntry>
;
}

selectedEntry: SelectBoxEntry

entries:Array<SelectBoxEntry>
blankOption: SelectBoxEntry

_isLabelVisible: boolean
isMandatory: boolean

Public Methods:

Wert des Controls setzen. @param bSuppressChange Auslösen eines Änderungs-Emits unterdrücken (true). @param delimiter Falls ein Trennzeichen angegeben wird, trennt sich newValue in ein Array und das Select wird in den Multiple-Modus gesetzt.

nimmt ein Array of Strings und macht sie zu Selected Values, alle anderen Werte können wahlweise "unselected" werden.

setzt den Input required Attribut auf true, den Label Text Style auf "color:red;", den Input auf "w3-border-red w3-pale-red".

    * Aktiviert oder deaktiviert Mehrfachauswahlmodus
    * @param bMultipleAllowed Modus aktivieren oder deaktiviertn
    * @param inputHeightElements Wenn Modus aktiviert: Höhe des Inputs, Angabe in Zeilenanzahl
    * @param maxSelectable Maximal erlaubte Auswahlanzahl
    * @param minSelect Minimal notwendige Auswahl
    

liefert wahlweise Value/Labels zurück. true für Labels, false für Values. if (this.multiple.active == true) - ruft die Methode getMultipleValue(bReturnLabels?: boolean): String[] auf, welche dementsprechen mehrere Values zurückgibt. Das Array von getMultipleValue() wird mit toString als ein String returniert.

Leer-Wert abrufen (für Vergleich ob bereits ein "valider" Wert ausgewählt wurde).

setzt den Parameter-Wert als Input Label und macht das Label sichtbar.

Liefert den Label Text zurück.

setzt die Property _isLabelVisible uf den Parameter-Wert und macht das Label (un)sichtbar: true == sichtbar, false == unsichtbar.

Aus dem aktuell gesetzten Wert die tatsächliche (HTML-)Option ermitteln; Styles und Labels setzen; das gewählte Entry hinterlegen

Neuen Eintrag zu den auswählbaren Optionen hinzufügen

Alias für addEntry

(leere) Standardauswahl erzeugen, üblicherweise als Platzhalter. Achtung: muss mit constructOptions bestätigt werden!

Options-Einträge aus den Entries erzeugen. Diese müssen vorher befüllt sein!

Die Optionen (un)wählbar oder "active"(ausgewählt) machen.

Die Optionen (un)wählbar oder "active"(ausgewählt) machen.

Einen Placeholder setzen.

Vorhandene Dojo Getter und Setter:

_setPlaceholderAttr(text: string), _setValueAttr(newValue: string), _getValueAttr(): string, _setIsMandatoryAttr(value: boolean), _setLabelAttr(newValue: string), _setReadonlyAttr(bReadOnly: boolean), _setBlankOptionAttr(value: string, label: string, bAvailable: boolean).