如何添加項目到一個多選擇和顯示他們在查看

Question

在我模式我有一個存儲音節的List場：

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

音節的樣子：

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

我想每個字符串中的音節綁定到select在我view：

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就是你所得到的輸入，text就是屏幕上顯示的內容以供選擇）

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) 

當選擇一個選項時，會觸發一個事件（例如SetSyllable）。因此，在update函數中需要類似這樣的內容：

type Msg 
    = SetSyllable String 

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