html-select – 如何在Elm中打印所选选项的索引?
发布时间:2020-12-14 19:30:22 所属栏目:资源 来源:网络整理
导读:我有一个 select HTML元素,有3个选项和一个 p 元素.在 p元素我想在 selectgt ;.中打印当前所选项目的索引.例如.如果我选择第一个选项,它应打印0,如果我选择第二个选项,它应该打印1,依此类推.如何从最小的代码进行下面给出的代码? import Html as H exposing
我有一个
<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,它可以打破 最终的代码如下所示: 更新为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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- html – 创建连接的圈子
- html – CSS object-fit:contains;在布局中保持原始图像
- html – 锚点标签变成一个带有float的div的非工作链接:rig
- 简单的libxml2 HTML解析示例,使用Objective-c,Xcode和HTMLp
- html – Twitter Bootstrap行嵌套
- jsf – WEB-INF目录下的Facelets页面
- .NET微信公众号查看关注者接口
- domain-name-system – 如何使用$GENERATE指令在BIND中为/
- Rails 3中的HAML仅生成doctype html
- Ajax如何进行跨域请求?Ajax跨域请求的原理