如何将项目添加到多行 Select 并在视图中显示它们

Question

在我的 模型中 我有一个存储 List 个音节的字段：

type alias Model =
{   freeSyllables : List FreeSyllable
    ...
}

音节看起来像：

type alias FreeSyllable =
{   syllable : String
,   usage : Usage
}

我想将每个音节中的字符串绑定到 view 中的 select:

select [ size 20, style [ ("width", "70px") ] ] []

我怎样才能做到这一点？谢谢。

Answer 1

为了将每个音节显示为 select 的 option，您需要 Html 模块中的 option 函数：

import Html exposing (Html, beginnerProgram, text, option, select)
import Html.Attributes exposing (style, value)
import Html.Events exposing (onInput)

然后将 freeSyllables 映射到 value 和 text 等于 syllable 的选项或其他东西（value 是你得到的input, text 是屏幕上显示的 select from)

view : Model -> Html Msg
view model =
    let
        syllableToOption : FreeSyllable -> Html Msg
        syllableToOption freeSyllable =
            option [ value freeSyllable.syllable ] [ text freeSyllable.syllable ]
    in
            select [ onInput SetSyllable ] (List.map syllableToOption model.freeSyllables)

当一个选项被select编辑时，一个事件（例如SetSyllable）被触发。因此，您需要在 update 函数中使用如下内容：

type Msg
  = SetSyllable String

update : Msg -> Model -> Model
update msg model =
    case msg of
        SetSyllable syllable ->
            model

如何将项目添加到多行 Select 并在视图中显示它们

How To Add Items To A Multiline Select And Show Them In The View

elm