我有一个
<select> HTML元素,有3个选项和一个
<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
解决方法
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
