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 "stackoverflow.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功能以编程方式选择option之一。它接受Bool，因此无论何时True，它都会选择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" ]
        ]

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

1 个答案: