Elm `update` is not executing the case statement when dropdown's value is changed

Question

I am new to Elm. I am not able to call the update function once the dropdown value changes.

Scenario: I have two dropdowns Grade and Environment. What I want is when Grade dropdown values change, the options of Environment dropdown will dependently change.

For example, if Grade dropdown value is 3 then the options of Environment should change to Imagine Math

    gradeDropdown : String -> List String -> Html Msg
    gradeDropdown grade grades =
        let
            buildOption =
                gradeOption grade
        in
            select [ class "importWizard--gradeSelection", name "gradeSelection", onChange (UpdateStudent Grade) ]
                (map buildOption grades)

    gradeOption : String -> String -> Html Msg
    gradeOption optSelectedVal temp =
        let
            optSelected =
                temp == optSelectedVal
        in
            option [ value temp, selected optSelected ] [ text temp ]

    environmentDropdown : Model -> String -> List String -> String -> Html Msg
    environmentDropdown model learningEnvironment learningEnvironments selectedGrade =
        let
            buildOption =
                environmentOption model learningEnvironment
            blueprint_grades = ["PreKindergarten", "Kindergarten", "1"]
            environmentDropdownOption =
              if (selectedGrade == "" || (List.member selectedGrade blueprint_grades)) then
                ["Blueprint"]
              else if (selectedGrade == "2") then
                learningEnvironments
              else
                ["Imagine Math"]
        in
            select [
              class "importWizard--learningEnvironmentSelection"
              , name "learningEnvironmentSelection"
              , onChange (UpdateStudent LearningEnvironments)
            ]
            (map buildOption environmentDropdownOption)

    environmentOption : Model -> String -> String -> Html Msg
    environmentOption model optSelectedVal temp =
        let
            optSelected =
                temp == optSelectedVal
        in
            option [ value temp, selected optSelected ] [ text temp ]

And in Update

update : Flags -> Msg -> Model -> ( Model, Cmd Msg )
    update flags message model =
        case message of
            UpdateStudent updateType newValue ->
                let
                    validate =
                        validateStudent flags validatableFieldsForScreen
                in
                    case updateType of
                        LastName ->
                            ( validate { model | lastName = newValue } <| Just LastNameField, Cmd.none )

                        FirstName ->
                            ( validate { model | firstName = newValue } <| Just FirstNameField, Cmd.none )

                        Sin ->
                            ( validate { model | sin = newValue } <| Just SinField, Cmd.none )

                        Grade ->
                            ( validate { model | grade = newValue, selectedGrade = newValue } Nothing, Cmd.none )

                        LearningEnvironments ->
                            ( validate { model | learningEnvironments = newValue } Nothing, Cmd.none )

View:

, td [ class wizardTableInput ] [ gradeDropdown model.grade flags.grades ]
, td [ class wizardTableInput ] [ environmentDropdown model model.learningEnvironments flags.learningEnvironments model.selectedGrade ]

In this code, the environment dropdown's value is changing, however the model's value is not updated. From what I understand, I can see is environment dropdown's id re-rendered, but it is not updating the model's value of learningEnvironments. This means it is not executing the update function matching LearningEnvironments.

Answer 1

select widgets where the options change is one of the use cases for Html.Keyed.node

Use a helper function like the one bellow:

keyedSelect : (String -> a) -> String -> List ( String, String ) -> Html a
keyedSelect message selectedValue kvs =
    let
        toOption ( k, v ) =
            ( k
            , option
                [ value k
                , selected (k == selectedValue)
                , disabled (k == "-1")
                ]
                [ text v ]
            )
    in
    Keyed.node "select"
        [ class "form-control", onChange message ]
        (List.map toOption kvs)

I usually have a "Please select Foo" first option with the value -1 if the user never selected any of the options. This is why the code checks for -1 and disables the option. You can remove the disabled attribute if you don't need it.