Work with elm and select

Question

I try to understand how elm works with a custom example.

durationOption duration =
  option [value (toString duration) ] [ text (toString duration)]

view : Mode         


        

Answer 1

This works with Ellie on Elm 0.19.0: https://ellie-app.com/58wGf2YsR9Ya1

Full code:

import Browser
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)

main =
    Browser.sandbox { init = init, view = view, update = update }

init =
    { duration = 1 }

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 }