MultiSelect
<select>
element with multiple selection.
This will properly give you the selected values for onChange
event since the core onChange
on select
doesn't.
Options
{ value : String
, text : String
, enabled : Basics.Bool
}
Item is the individual content of the dropdown.
value
is the item value or id
text
is the display text of the multi-select item.enabled
is a flag to indicate whether the item is enabled or disabled.{ items : List Item
, onChange : List String -> msg
}
Options for the dropdown.
items
is content of the dropdown.onChange
is the message for when the selected value in the multi-select is changed.defaultOptions : (List String -> msg) -> Options msg
Default Options, will give you empty multi-select with no empty item
multiSelect : Options msg -> List (Html.Attribute msg) -> List String -> Html msg
Html element.
Put this in your view's Html content. Example:
type Msg = MultiSelectChanged (List String)
Html.div []
[ multiSelect
(defaultOptions MultiSelectChanged)
[ class "my-multiSelect" ]
model.selectedValues
]