Question

我基本上有一个像这样的选择下拉列表：

viewDropdown : Model -> Html Msg
viewDropdown model =
    let
        options =
            [ ( "", "-- Select --" )
            , ( "not_available", "Unavailable" )
            , ( "available", "Available" )
            ]

        buildOption ( k, v ) =
            option [ value k, selected (k == model.isAvailable) ] [ text v ]

        viewOptions =
            options
                |> List.map
                    (\( k, v ) ->
                        buildOption ( k, v )
                    )
    in
    div [ class "styled-select" ]
        [ select
            [ on "change" (Decode.map (UpdateAvailability) targetValue)
            ]
            viewOptions
        ]

如果用户选择“可用”，则会弹出一个模式，提示他们进行确认。如果他们点击“取消”，我希望“选择”下拉列表的值重置为“”的值。情况并非如此，尽管我的模型反映的是Nothing val，但下拉选择选项仍位于“可用”上。关于我可以做什么来重置DOM状态的任何想法？

Answer 1

虽然这不能回答为什么您的代码不起作用的问题，但似乎如果您添加确认选择的步骤，那么代码将起作用：

Ellie示例，下面有完整代码：https://ellie-app.com/3P5TTM9YqVWa1

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text, option, select)
import Html.Events exposing (onClick, on, targetValue)
import Html.Attributes exposing (value, selected, class)
import Json.Decode as Decode
import Task

type alias Model =
    { isAvailable : String , showConfirm: Bool }

init : Model
init =
    { isAvailable = "-", showConfirm = False }

type Msg
    = UpdateAvailability String
    | ConfirmYes
    | Reset

update : Msg -> Model -> Model
update msg model =
    case msg of
        UpdateAvailability v ->
            { model | isAvailable = v, showConfirm = (v == "available") }

        ConfirmYes ->
            { model | showConfirm = False }

        Reset ->
            { model | isAvailable = "-", showConfirm = False }



viewDropdown : Model -> Html Msg
viewDropdown model =
    let
        options =
            [ ( "-", "-- Select --" )
            , ( "not_available", "Unavailable" )
            , ( "available", "Available" )
            ]

        buildOption ( k, v ) =
            option [ value k, selected (k == model.isAvailable) ] [ text v ]

        viewOptions = List.map buildOption options
    in
    div []
        [ select
            [ on "change" (Decode.map (UpdateAvailability) targetValue) ]
            viewOptions
        ]

viewConfirm model =
    if model.showConfirm then
        div []
            [ text "Really available?"
            , button [ onClick ConfirmYes ] [ text "Yes" ]
            , button [ onClick Reset ] [ text "No" ]
            ]
    else
        div [] []

view : Model -> Html Msg
view model =
    div []
        [ viewDropdown model
        , viewConfirm model
        , button [ onClick Reset ] [ text "Reset" ]
        ]


main : Program () Model Msg
main =
    Browser.sandbox
        { init = init
        , view = view
        , update = update
        }

Answer 2

按下关闭按钮时，您是否将model.isAvailable设置为“”？您的代码应按https://ellie-app.com/3NYRvgwkHWPa1

的方式工作

Answer 3

结果是，在value html中添加select属性将覆盖选项selected状态，因此，如果您需要选择的输入与模型同步，这非常重要状态。

https://ellie-app.com/3NZgYQYKv2Fa1

重置Elm select下拉值

3 个答案: