Elm에서 다중 선택의 선택된 옵션을 얻는 방법은 무엇입니까?

Question

나는 what is required for a getting the selected index of a single select을 보았지만 다중 선택에서 선택된 모든 옵션을 얻는 데 관심이 있습니다. 나는 이것을하는 방법을 해결할 수 없었습니다.

다음을 시도했지만 Json 디코더가 실패한 것 같습니다. 나는 가상의 DOM 코드에서 디코딩이 발생하고 거기에 오류가 있기 때문에 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이 자바 스크립트 배열이 아니기 때문에 디코더가 실패합니다. 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