How to print index of selected option in Elm?

Answer 1

There's a lot of different events in elm-html 2.0.0, but nothing relevant to the <select> HTML element. So you definitely need a custom event handler, which you can create using on. It has a type:

on : String -> Decoder a -> (a -> Message a) -> Attribute

The event that is triggered every time you select an option inside the <select> is called “change”. What you need is targetSelectedIndex from elm-community/html-extra which ustilizes a selectedIndex property.

The final code would look like this:

Updated to Elm-0.18

import Html exposing (..)
import Html.Events exposing (on, onClick)
import Html.Attributes exposing (..)
import Json.Decode as Json
import Html.Events.Extra exposing (targetSelectedIndex)


type alias Model =
    { selected : Maybe Int }


model : Model
model =
    { selected = Nothing }


type Msg
    = NoOp
    | Select (Maybe Int)


update : Msg -> Model -> Model
update msg model =
    case msg of
        NoOp ->
            model

        Select s ->
            { model | selected = s }


view : Model -> Html Msg
view model =
    let
        selectEvent =
            on "change"
                (Json.map Select targetSelectedIndex)
    in
        div []
            [ select [ size 3, selectEvent ]
                [ option [] [ text "1" ]
                , option [] [ text "2" ]
                , option [] [ text "3" ]
                ]
        , p []
            [ text <|
                Maybe.withDefault "" <|
                    Maybe.map toString model.selected
            ]
        ]


main : Program Never Model Msg
main =
    beginnerProgram { model = model, view = view, update = update }

You can run it in browser here https://runelm.io/c/xum