OK, upon double-checking the MDN docs for select
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select>and input
<https://developer.mozilla.org/en-US/docs/Web/Events/input>, I can confirm
that select does not fire "onInput". Elm does not have a built-in
"onChange" event handler, so I think that the custom event handler is the
only solution. And now I will stop pinging the thread :-)

On Mon, Feb 27, 2017 at 10:17 AM, Nick H <[email protected]> wrote:

> (and Attr is an alias for Html.Attributes)
>
> On Mon, Feb 27, 2017 at 10:16 AM, Nick H <[email protected]>
> wrote:
>
>> I am looking through some code where I successfully implemented a
>> drop-down menu, and it appears I wrote a custom event handler. "onInput"
>> did not work for me.
>>
>> Here is the function that I wrote (Evt is an alias for Html.Events).
>>
>> select : (String -> a) -> String -> List ( String, String ) -> Html a
>> select sendMsg selection options =
>>     let
>>         toOption ( value, label ) =
>>             Html.option
>>                 [ Attr.selected (selection == value)
>>                 , Attr.value value
>>                 ]
>>                 [ Html.text label ]
>>
>>         handler =
>>             Evt.on "change" (Json.map sendMsg Evt.targetValue)
>>     in
>>         Html.select [ handler ] (List.map toOption options)
>>
>> On Mon, Feb 27, 2017 at 6:53 AM, <[email protected]> wrote:
>>
>>> I have been trying to use Html.select (the drop-down menu).
>>> Unfortunately the selected attribute doesn't seem to work for me.
>>>   Some context: I am attempting the exercises at the bottom of
>>> https://guide.elm-lang.org/architecture/effects/http.html.  As new
>>> topics are entered in the input box, they should be added to the drop-down
>>> menu.  I found this would sporadically cause the menu selection to jump
>>> around, so I tried to handle it manually using the selected attribute.
>>>   Anybody have any ideas how to do this so it works?  The relevant piece
>>> of code looks something like this:
>>>
>>> view : Model -> Html Msg
>>> view model =
>>>     div []
>>>         [ input [ onInput ChangeTopic ] []
>>>         , select [ onInput SelectTopic ]
>>>             (List.map
>>>                 (makeOption model.selectedTopic)
>>>                 (Set.toList model.allTopics)
>>>             )
>>>         , button [ onClick MorePlease ] [ text "Go!" ]
>>>         , img [ src model.gifUrl ] []
>>>         ]
>>>
>>> makeOption : String -> String -> Html msg
>>> makeOption selectedTopic topic =
>>>     option
>>>         (if topic == selectedTopic then
>>>             [ value topic, selected True ]
>>>          else
>>>             [ value topic ]
>>>         )
>>>         [ text topic ]
>>>
>>> --
>>> You received this message because you are subscribed to the Google
>>> Groups "Elm Discuss" group.
>>> To unsubscribe from this group and stop receiving emails from it, send
>>> an email to [email protected].
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>
>>
>

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
For more options, visit https://groups.google.com/d/optout.

Reply via email to