如何以编程方式 select 列表视图项？

Question

我有以下列表视图：

listview =
    select [ Html.Events.on "change" (Json.Decode.map InputContentType Html.Events.targetValue) ]
        [ option [ value "instructions" ] [ text "Content Type" ]
        , option [ value "Article" ] [ text "Article" ]
        , option [ value "Video" ] [ text "Video" ]
        , option [ value "Answer" ] [ text "Answer" ]
        , option [ value "Podcast" ] [ text "Podcast" ]
        ]

更新：

我合并了下面发布的答案并更新了解决方案如下：

( isArticle, isVideo, isAnswer, isPodcast ) =
            if hasText "youtube.com" then
                ( False, True, False, False )
            else if hasText "vimeo.com" then
                ( False, True, False, False )
            else if hasText "wordpress.com" then
                ( True, False, False, False )
            else if hasText "medium.com" then
                ( True, False, False, False )
            else if hasText "whosebug.com" then
                ( False, False, True, False )
            else
                ( False, False, False, False )

        listview =
            select [ Html.Events.on "change" (Json.Decode.map InputContentType Html.Events.targetValue) ]
                [ option [ value "instructions" ] [ text "Content Type" ]
                , option [ value "Article", selected isArticle ] [ text "Article" ]
                , option [ value "Video", selected isVideo ] [ text "Video" ]
                , option [ value "Answer", selected isAnswer ] [ text "Answer" ]
                , option [ value "Podcast", selected isPodcast ] [ text "Podcast" ]
                ]

Answer 1

您可以使用 Html.Attributes.selected 函数以编程方式 select option 之一。它接受 Bool，因此只要它是 True，它就会 select 即 option。

listview =
    select [ Html.Events.on "change" (Json.Decode.map InputContentType Html.Events.targetValue) ]
        [ option [ value "instructions" ] [ text "Content Type" ]
        , option [ value "Article", selected True ] [ text "Article" ]
        , option [ value "Video" ] [ text "Video" ]
        , option [ value "Answer" ] [ text "Answer" ]
        , option [ value "Podcast" ] [ text "Podcast" ]
        ]

如何以编程方式 select 列表视图项？

How can I programmatically select a listview item?

elm