Elmで複数選択のオプションを選択するには？

Question

私はwhat is required for a getting the selected index of a single selectを見ましたが、私はマルチセレクトからすべての選択肢を得ることに興味があります。私はこれを行う方法を解決することができませんでした。

私は以下を試みましたが、Jsonデコーダが失敗していると思われます。私は100％確信しているわけではありません。なぜなら、デコードはバーチャルドームコード内で起こり、そこに何らかのエラーが出てしまうからです。

type Msg 
= SetMultipleInts (List Int) 

-- I'm not seeing the SetMultipleInts message when I click on the multiselect 
view model = 
    div [] 
     [ select (onSelect SetMultipleInts) (List.map myOption [1..4]) ] 

myOption : Int -> Html Msg 
myOption id = 
    option [ value (toString id) ] [ text <| "Option " ++ (toString id) ] 

-- I'm not seeing anything happen in the onchange 
onMultiSelect : (List Int -> msg) -> List (Html.Attribute msg) 
onMultiSelect msg = 
    [ on "change" (Json.map msg targetSelectedOptions), multiple True ] 

targetSelectedOptions : Json.Decoder (List Int) 
targetSelectedOptions = 
    Json.at [ "target", "selectedOptions" ] (Json.list (Json.at [ "value" ] Json.int)) 

ポートを使用せずにこれを行うことはできますか？

Answer 1

event.target.selectedOptionsが のJavaScript配列ではないため、デコーダが失敗します。 Json.Decode.listを使用できない場合、 はJson.Decode.keyValuePairsを使用できます。

ここでは、その使用方法の例を示します。 に応じて、下のextractValuesを空の選択などにどのように反応させるかを変更することができます。

targetSelectedOptions : Json.Decoder (List String) 
targetSelectedOptions = 
    let 
    maybeValues = 
     Json.at [ "target", "selectedOptions" ] 
     <| Json.keyValuePairs 
     <| Json.maybe ("value" := Json.string) 
    extractValues mv = 
     Ok (List.filterMap snd mv) 
    in Json.customDecoder maybeValues extractValues