Как распечатать индекс выбранной опции в Elm?

У меня есть <select> HTML-элемент с тремя параметрами и <p>. В элементе <p> я хочу напечатать индекс текущего выбранного элемента в <select>. Например. если я выбираю первый вариант, он должен печатать 0, если я выбираю второй вариант, он должен печатать 1 и т.д. Как перейти от минимального кода, который приведен ниже?

import Html as H exposing (Html)
import Maybe
import Signal as S exposing (Address, (<~))

type alias Model = { selected : Maybe Int }
model = { selected = Nothing }

type Action = NoOp | Select Int
update action model =
  case action of
    NoOp -> model
    Select n -> { model | selected <- Just n }

view address model =
  H.div []
     [ H.select [] [ H.option [] [ H.text "0" ]
                   , H.option [] [ H.text "1" ]
                   , H.option [] [ H.text "2" ]
                   ]
     , H.p [] [ H.text <| Maybe.withDefault ""
                   <| Maybe.map toString model.selected ]
     ]

actions = Signal.mailbox NoOp
main = view actions.address <~ S.foldp update model actions.signal

Ответы

Ответ 1

Там много различные события в elm-html 2.0.0, но ничего не имеет отношения к элементу <select> HTML. Поэтому вам определенно нужен специальный обработчик событий, который вы можете создать с помощью on. Он имеет тип:

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

Событие, которое запускается каждый раз при выборе опции внутри <select>, называется "change" . Вам нужно targetSelectedIndex из elm-community/html-extra, который утилит свойство selectedIndex.

Последний код будет выглядеть так:

Обновлено до 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 }

Вы можете запустить его в браузере здесь https://runelm.io/c/xum