PeteDevoy/select-multiple-example-2021.elm

## select-multiple-example-2021.elm
{- authored by https://github.com/lucamug -}

module Main exposing (main)

import Browser
import Html exposing (..)
import Html.Attributes
import Html.Events
import Json.Decode


type alias Model =
    { value : List ( String, Maybe String ) }


init : Model
init =
    { value = [] }


type Msg
    = SetMultipleInts (List ( String, Maybe String ))


update : Msg -> Model -> Model
update msg model =
    case msg of
        SetMultipleInts value ->
            { model | value = value }


view : Model -> Html Msg
view model =
    div []
        [ select
            [ Html.Events.on "change"
                (Json.Decode.map SetMultipleInts targetSelectedOptions)
            , Html.Attributes.multiple True
            ]
            (List.map myOption (List.range 1 4))
        , div []
            [ text <|
                Debug.toString
                    (model
                        |> .value
                        |> List.map Tuple.second
                        |> List.filterMap identity
                    )
            ]
        ]


targetSelectedOptions : Json.Decode.Decoder (List ( String, Maybe String ))
targetSelectedOptions =
    Json.Decode.at [ "target", "selectedOptions" ] <|
        Json.Decode.keyValuePairs <|
            Json.Decode.maybe (Json.Decode.at [ "value" ] Json.Decode.string)


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


main : Program () Model Msg
main =
    Browser.sandbox
        { init = init
        , view = view
        , update = update
        }

## select-multiple-example-2021.html
{- authored by https://github.com/lucamug -}

<html>
<head>
  <style>
    /* you can style your program here */
  </style>
</head>
<body>
  <main></main>
  <script>
    var app = Elm.Main.init({ node: document.querySelector('main') })
    // you can use ports and stuff here
  </script>
</body>
</html>
	{- authored by https://github.com/lucamug -}

	module Main exposing (main)

	import Browser
	import Html exposing (..)
	import Html.Attributes
	import Html.Events
	import Json.Decode


	type alias Model =
	{ value : List ( String, Maybe String ) }


	init : Model
	init =
	{ value = [] }


	type Msg
	= SetMultipleInts (List ( String, Maybe String ))


	update : Msg -> Model -> Model
	update msg model =
	case msg of
	SetMultipleInts value ->
	{ model \| value = value }


	view : Model -> Html Msg
	view model =
	div []
	[ select
	[ Html.Events.on "change"
	(Json.Decode.map SetMultipleInts targetSelectedOptions)
	, Html.Attributes.multiple True
	]
	(List.map myOption (List.range 1 4))
	, div []
	[ text <\|
	Debug.toString
	(model
	\|> .value
	\|> List.map Tuple.second
	\|> List.filterMap identity
	)
	]
	]


	targetSelectedOptions : Json.Decode.Decoder (List ( String, Maybe String ))
	targetSelectedOptions =
	Json.Decode.at [ "target", "selectedOptions" ] <\|
	Json.Decode.keyValuePairs <\|
	Json.Decode.maybe (Json.Decode.at [ "value" ] Json.Decode.string)


	myOption : Int -> Html Msg
	myOption id =
	option [ Html.Attributes.value (String.fromInt id) ]
	[ text <\| "Option " ++ String.fromInt id ]


	main : Program () Model Msg
	main =
	Browser.sandbox
	{ init = init
	, view = view
	, update = update
	}
	{- authored by https://github.com/lucamug -}

	<html>
	<head>
	<style>
	/* you can style your program here */
	</style>
	</head>
	<body>
	<main></main>
	<script>
	var app = Elm.Main.init({ node: document.querySelector('main') })
	// you can use ports and stuff here
	</script>
	</body>
	</html>