Simple Selector in Elm

Main.elm

import Html exposing (node, div, span, text, input)
import Html.Attributes exposing (style, placeholder, value)
import Html.Events exposing (onClick)
import Html.App exposing (beginnerProgram)

{-| Representation of an selectable item. -}
type alias Item =
  { label : String
  , value : String
  }

{-| Representation of a selector component.
  - **options** -
  - **selected** -
-}
type alias Model =
  { options: List Item
  , selected: String
  }

-- {-| Actions.-}
type Msg = Select Item


data : List Item
data =
  [ { label = "Taiwan", value = "tw" }
  , { label = "Japan", value = "jp" }
  , { label = "Korea", value = "kr" }
  ]
  
main = beginnerProgram
  { model = { options = data, selected = "" }
  , view = view
  , update = update
  }
update msg model =
  case msg of
    Select item -> { model | selected = item.value }

{-| View -}

view model =
  let
    renderItems item =
      Html.App.map Select
        (div [ onClick item ] [ text item.value ])
    menu = List.map renderItems model.options
  in
    node "ui-selector" []
      ([ input
        [ placeholder "Select ..."
        , value model.selected
        ] [] ] ++ menu)