abadi199 / elm-input-extra / MultiSelect

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


type alias Item =
{ value : String
, text : String
, enabled : Basics.Bool 
}

Item is the individual content of the dropdown.


type alias Options msg =
{ items : List Item
, onChange : List String -> msg 
}

Options for the dropdown.

defaultOptions : (List String -> msg) -> Options msg

Default Options, will give you empty multi-select with no empty item

View

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
    ]