我有一个<select> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/selectHTML 元素有 3 个选项和一个<p> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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
有很多不同的事件 http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Events in elm-html 2.0.0 http://package.elm-lang.org/packages/elm-lang/html/2.0.0,但与<select>
HTML 元素。所以你肯定需要一个自定义事件处理程序,你可以使用它来创建on http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Events#on。它有一个类型:
on : String -> Decoder a -> (a -> Message a) -> Attribute
每次选择里面的选项时都会触发的事件<select>
叫做“change” https://developer.mozilla.org/en-US/docs/Web/Events/change。你需要的是目标选定索引 http://package.elm-lang.org/packages/elm-community/html-extra/2.2.0/Html-Events-Extra#targetSelectedIndex from 榆树社区/html-extra http://package.elm-lang.org/packages/elm-community/html-extra它利用了一个selectedIndex https://docs.webplatform.org/wiki/dom/HTMLElement/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 https://runelm.io/c/xum
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)