Elmでselectboxをリセットするサンプル

* [Elmでselectboxをリセットするサンプル](https://ellie-app.com/dWGVyzvy5MPa1)

## selectをリセットするサンプル

* 参考: https://ellie-app.com/3P5TTM9YqVWa1

```eml
module Main exposing (main)

import Browser
import Html exposing (Html, h1, button, div, text, option, select)
import Html.Events exposing (onClick, on, targetValue)
import Html.Attributes exposing (value, selected, class)
import Json.Decode as Decode

type alias Model =
    { isAvailable : String }

init : Model
init = { isAvailable = "-" }

type Msg
    = UpdateSelected String
    | Reset

update : Msg -> Model -> Model
update msg model =
    case msg of
        UpdateSelected v ->
            { model | isAvailable = v }
        Reset ->
            { model | isAvailable = "-" }

viewDropdown : Model -> Html Msg
viewDropdown model =
    let
        options =
            [ ( "-", "-- 選択してください --" )
            , ( "1", "項目1" )
            , ( "2", "項目2" )
            ]

        buildOption ( k, v ) =
            option [ value k, selected (k == model.isAvailable) ] [ text v ]

        viewOptions = List.map buildOption options
    in
    div []
        [ select
            [ on "change" (Decode.map (UpdateSelected) targetValue) ]
            viewOptions
        ]

view : Model -> Html Msg
view model =
    div []
        [ h1 [] [ text "selectbox初期化サンプル" ]
        , viewDropdown model
        , button [ onClick Reset ] [ text "リセット" ]
        ]


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


## オンラインで試せる

* https://elm-lang.org/try
* https://ellie-app.com/dWGVyzvy5MPa1

## 入門

* サンプル https://elm-lang.org/examples
* https://guide.elm-lang.org/



## snippets

```elm
import Html exposing (text)
main =
  text "Hello!"
```

```elm
import Html exposing (..)
main =
  div []
    [ h1 [] [ text "My Grocery List" ]
    , ul []
        [ li [] [ text "Black Beans" ]
        , li [] [ text "Limes" ]
        , li [] [ text "Greek Yogurt" ]
        , li [] [ text "Cilantro" ]
        , li [] [ text "Honey" ]
        , li [] [ text "Sweet Potatoes" ]
        , li [] [ text "Cumin" ]
        , li [] [ text "Chili Powder" ]
        , li [] [ text "Quinoa" ]
        ]
    ]
```

```elm
import Html exposing (..)
main =
  div []
    [ select []
        [ option [] [ text "--選択してください--" ]
        , option [] [ text "1" ]
        , option [] [ text "2" ]
        ]
    ]
```


```elm
import Html exposing (..)
main =
  div []
    [ select []
        [ option [] [ text "--選択してください--" ]
        , option [] [ text "1" ]
        , option [] [ text "2" ]
        ]
    , button [] [ text "リセット" ]
    ]
```


```elm:onClick
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

main =
  Browser.sandbox { init = 0, update = update, view = view }

type Msg = Increment | Increment2 | Decrement

update msg model =
  case msg of
    Increment ->
      model + 1
      
    Increment2 ->
      model + 2

    Decrement ->
      model - 1

view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    , button [ onClick Increment2 ] [ text "+2" ]
    ]
```

```elm:onclick
import Browser
import Html exposing (..)
import Html.Events exposing (onClick)

main =
  Browser.sandbox { init = 0, update = update, view = view }

type Msg = Reset

update msg model =
  case msg of
    Reset ->
      model + 1

view model =
  div []
    [ select []
        [ option [] [ text "--選択してください--" ]
        , option [] [ text "1" ]
        , option [] [ text "2" ]
        ]
    , button [ onClick Reset ] [ text "リセット" ]
    , div [] [ text (String.fromInt model) ]
    , div [] [ text (String.fromInt model) ]
    , div [] [ text (String.fromInt model) ]
    ]
```