Dropdown

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the dropdown
var el = document.querySelector("#dropdown");
var dropdown = Components.Dropdown({
    el: el,
    label: "Select a Choice",
    items: [
        { text: "Choice 1", value: "1" },
        { text: "Choice 2", value: "2" },
        { text: "Choice 3", value: "3" },
        { text: "Choice 4", value: "4" },
        { text: "Choice 5", value: "5" }
    ],
    onChange: function(item, ev) {
        console.log("The selected value is: " + item.text);
    }
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the dropdown
let el = document.querySelector("#dropdown");
let dropdown = Components.Dropdown({
    el: el,
    label: "Select a Choice",
    items: [
        { text: "Choice 1", value: "1" },
        { text: "Choice 2", value: "2" },
        { text: "Choice 3", value: "3" },
        { text: "Choice 4", value: "4" },
        { text: "Choice 5", value: "5" }
    ],
    onChange: (item, ev) => {
        console.log("The selected value is: " + item.text);
    }
});

Web Component

// Return the dropdown properties return { items: [ { text: "Choice 1", value: "1" }, { text: "Choice 2", value: "2" }, { text: "Choice 3", value: "3" }, { text: "Choice 4", value: "4" }, { text: "Choice 5", value: "5" } ], onChange: onChangeEvent };
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-dropdown label="Select a Choice">
    // Return the dropdown properties
    return {
        items: [
            { text: "Choice 1", value: "1" },
            { text: "Choice 2", value: "2" },
            { text: "Choice 3", value: "3" },
            { text: "Choice 4", value: "4" },
            { text: "Choice 5", value: "5" }
        ],
        onChange: function(item, ev) {
            console.log("The selected value is: " + item.text);
        }
    };
</bs-dropdown>

References

Dropdown(props:IDropdownProps):IDropdown
Name Value
Danger 1
Info 2
Primary 3
Secondary 4
Success 5
Warning 6

IDropdown

Name Returns Description
dispose void Destroys an element’s dropdown.
el Element The jquery element.
toggle void Toggles the dropdown menu of a given navbar or tabbed navigation.
update void Updates the position of an element’s dropdown.

IDropdownItem

Name Type Description
className string Sets the class name of the dropdown item element.
data any The item data value.
href string Renders the item as a link.
isDisabled boolean True to set the disabled flag.
isDivider boolean True to render a divider.
isHeader boolean True to add the ‘dropdown-header’ class.
isSelected boolean True to select the item.
onChange (item: IDropdownItem | Array<IDropdownItem>, ev: Event) => void The change event.
onRender (el: HTMLElement, item?: IDropdownItem) => void The render event.
text string The value displayed to the user.
value any The item value.

IDropdownProps

Name Type Description
className string The class name to apply to dropdown.
dropLeft boolean Adds the ‘dropleft’ class.
dropRight boolean Adds the ‘dropright’ class.
dropUp boolean Adds the ‘dropup’ class.
el HTMLElement The element to render the dropdown to.
formFl boolean True if the dropdown is being rendered in a form.
id string The id of the dropdown.
isSplit boolean True render a split button.
items Array<IDropdownItem> The dropdown items.
label string The dropdown label.
multi boolean True to render the dropdown as a multi-select.
onChange (item: IDropdownItem | Array<IDropdownItem>, ev: Event) => void The change event.
type number The dropdown type. Reference the DropdownTypes enumerator
value string | Array<string> The selected item values.