Elm dropdown issue

Learn
1

I am trying to create a dynamic form using Elm such that depending upon the dropdown selection, a form or message would appear. I have a working version of it in Ellie: https://ellie-app.com/bC4QH7n8dGPa1

I was able to create an input field when we select “Available” in the dropdown but I want another input field to be displayed when I click on “Unavailable”. I tried doing it the same way as I did for Available but I wasn’t able to do it for another option “unavailable”. How can I display a new input field when someone clicks “unavailable”?

2

How about something like this? https://ellie-app.com/bC7jcnmPTB4a1

Or this, to avoid risking to misspell the strings: https://ellie-app.com/bC7nGyfmr4Ca1

3

This is perfect. If I may ask what would be a better naming for:
buildOption ( k, v ) =
option [ value k, selected (k == model.isAvailable) ] [ text v ]

viewOptions =
    List.map buildOption options

I have read the code somewhere for build Option but I really didn’t understand what it is doing:
buildOption ( k, v ) =
option [ value k, selected (k == model.isAvailable) ] [ text v ]

@lucamug

4

buildOption build a singular HTML part using this function https://package.elm-lang.org/packages/elm/html/1.0.0/Html#option

I added some type signature so it should be clearer now: https://ellie-app.com/bChvrd6Xxw5a1

I also added the module names to functions so it should help to understand what these functions do.

        options : List ( String, String )
        options =
            [ ( "-", "-- Select --" )
            , ( label.notAvailable, "Unavailable" )
            , ( label.available, "Available" )
            ]

        buildOption : ( String, String ) -> Html.Html msg
        buildOption ( k, v ) =
            Html.option [ Html.Attributes.value k, Html.Attributes.selected (k == model.isAvailable) ] [ Html.text v ]

        viewOptions : List (Html.Html msg)
        viewOptions =
            List.map buildOption options
5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.