html-select – 如何在Elm中打印所选选项的索引？

我有一个 <select> HTML元素,有3个选项和一个 <p>元素.在< p>元素我想在< select&gt ;.中打印当前所选项目的索引.例如.如果我选择第一个选项,它应打印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

解决方法

elm-html 2.0.0有很多 different events,但与< 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