Created
July 23, 2019 04:37
-
-
Save koolquark/d7ff618c50d3f194b9be93b851cedc6b to your computer and use it in GitHub Desktop.
Elm select list - updated to 0.19
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-- See https://stackoverflow.com/questions/37376509/work-with-elm-and-select | |
-- Modified for Elm 0.19 | |
import Html exposing (..) | |
import Html.Events exposing (on) | |
import Html.Attributes exposing (..) | |
import Json.Decode as Json | |
import String | |
import Html.Events.Extra exposing (targetValueIntParse) | |
import Browser exposing (sandbox) | |
main = | |
sandbox { init = { duration = 1}, view = view, update = update } | |
durationOption duration = | |
option [ value (String.fromInt duration) ] [ text (String.fromInt duration) ] | |
view : Model -> Html Msg | |
view model = | |
Html.div [] | |
[ h2 [] [ text "Month selector" ] | |
, select [ on "change" (Json.map SetDuration targetValueIntParse) ] | |
(List.map durationOption (List.range 1 12)) | |
, div [] [ text <| "Selected: " ++ (String.fromInt model.duration) ] | |
] | |
type Msg | |
= SetDuration Int | |
type alias Model = | |
{ duration : Int } | |
update msg model = | |
case msg of | |
SetDuration val -> | |
{ model | duration = val } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment