# How can I reset a select control?
**URL:** https://discourse.elm-lang.org/t/how-can-i-reset-a-select-control/6005
**Category:** Learn
**Created:** [July 6, 2020, 11:22am UTC](https://discourse.elm-lang.org/t/how-can-i-reset-a-select-control/6005 "2020-07-06T11:22:43Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@pdamoc](https://discourse.elm-lang.org/u/pdamoc)
#### Post date: [July 6, 2020, 11:22am UTC](https://discourse.elm-lang.org/t/how-can-i-reset-a-select-control/6005/1 "2020-07-06T11:22:44Z")
I have a select widget that validates the change on the backend and I cannot figure out how reset the select to the previous value.
So, when the select changes, I take the value from the message, check it on the backend and the backend can return the same value or error out. If the value is valid, I set it, if not… I leave the model the same.
In [this Ellie example](https://ellie-app.com/9kZ9FfRjj73a1) I do nothing on selection and I expect the selected value to reset back to “The Bar” after selecting “The Foo”.
What am I missing? How can I reset the selection back to “The Bar”?
---
### Author:  [@justinmimbs](https://discourse.elm-lang.org/u/justinmimbs)
#### Post date: [July 6, 2020, 12:06pm UTC](https://discourse.elm-lang.org/t/how-can-i-reset-a-select-control/6005/2 "2020-07-06T12:06:56Z")
You should be able to set the `value` property of the `select` directly (`Html.Attributes.property "value" (Json.Encode.string selectedValue)`). The `selected` attribute of `option` seems to be only for setting the initially-selected option.
---
### Author:  [@pdamoc](https://discourse.elm-lang.org/u/pdamoc)
#### Post date: [July 6, 2020, 3:44pm UTC](https://discourse.elm-lang.org/t/how-can-i-reset-a-select-control/6005/3 "2020-07-06T15:44:29Z")
> [@justinmimbs](#):
>
> You should be able to set the `value` property of the `select` directly ( `Html.Attributes.property "value" (Json.Encode.string selectedValue)`
Thank you! This worked wonderfully!
---
### Author:  [@0ui](https://discourse.elm-lang.org/u/0ui)
#### Post date: [July 13, 2020, 11:26pm UTC](https://discourse.elm-lang.org/t/how-can-i-reset-a-select-control/6005/4 "2020-07-13T23:26:13Z")
Not sure if this thread is the place for it but I ran into this issue as well as some related ones which I thought I’d share for posterity.
**A select value is a property but an option value is an attribute**
Getting these mixed leads to odd behavior like incorrect default values, text disappearing, and disabled options not showing
```auto
select [Html.Attributes.property "value" (Encode.string "my-value")]
[option [ Html.Attributes.attribute "value" "my-value"] []
]
```
**Explicitly use Html.Attributes.attribute to set an option’s value instead of Html.Attributes.value**
[https://ellie-app.com/9qkCLMDC6r6a1](https://ellie-app.com/9qkCLMDC6r6a1)
In this example in Chrome, both select options are disabled but only the first option using `Html.Attributes.attribute` appears so. The other one using `Html.Attributes.value` seems like a selectable option. Clicking re-render makes the second option’s text disappear.
In Firefox, the second option appears initially but disappears on re-rendering.
**Both the select’s `value` and the option’s `selected` are required to keep the render consistent with your model.**
Here the select’s `value` is set but the initial render is wrong because no option has `selected`. Click the NoOp button to re-render and see the correct value. Reload and the wrong value is back. Same happens with navigation away from and back to the page.
[https://ellie-app.com/9qkMcTdGtK4a1](https://ellie-app.com/9qkMcTdGtK4a1)
You can easily set them to opposing values. Here, the initial render says `three` but the model is `two` and the select defaults to `one`. Re-rendering button shows the correct `two`.
[https://ellie-app.com/9qkMPwBRJ4Ja1](https://ellie-app.com/9qkMPwBRJ4Ja1)
Setting both keeps the correct value consistently.
[https://ellie-app.com/9qkNtG7Zz6Ga1](https://ellie-app.com/9qkNtG7Zz6Ga1)
**Example of odd value behavior: If you have an intermediate set of options (eg while loading) with `selected True` and `Html.Attributes.value`, it will supersede a later `selected` option.**
In this example, both `value` and `selected` are correctly set, but a “loading…” option is briefly shown that uses `Html.Attributes.value`. This supersedes the later options and the incorrect initial value of “Option One” is shown. Click the NoOp button to re-render and show the correct “Select one”. Or edit the code to remove the `selected True` from the loading option and it will work as expected.
[https://ellie-app.com/9qkZdWFqbLYa1](https://ellie-app.com/9qkZdWFqbLYa1)
This version where `Html.Attributes.value` is replaced with `Html.Attributes.attribute "value"` works as expected
[https://ellie-app.com/9qkYXxGhdNZa1](https://ellie-app.com/9qkYXxGhdNZa1)
---
### Author:  [@Hector](https://discourse.elm-lang.org/u/Hector)
#### Post date: [July 17, 2020, 4:08pm UTC](https://discourse.elm-lang.org/t/how-can-i-reset-a-select-control/6005/5 "2020-07-17T16:08:25Z")
> [@justinmimbs](#):
>
> The `selected` attribute of `option` seems to be only for setting the initially-selected option.
I think this is incorrect. While it’s true that an element attribute sets the initial property of the dom, in elm `selected` is implemented as a property:
```
selected : Bool -> Attribute msg
selected =
boolProperty "selected"
...
boolProperty : String -> Bool -> Attribute msg
boolProperty key bool =
Elm.Kernel.VirtualDom.property key (Json.bool bool)
```
So it can actually be used to set the select value. But, as mentioned in the other reply, it’s necessary to keep the model in sync with the dom; otherwise when the user changes the selection, the select value property and the option selected property are changed, but the elm model is oblivious of the change.
Back to the original problem, I don’t understand why you want to prevent the change in the select; it seems like bad UX. For me, you either disable the options that you know can’t be selected or after the backend check you revert the change with an appropriate ui message.
[Here is an ellie example](https://ellie-app.com/9rG4Bqwf3J3a1) that simulates a backend call and then reverts the selected value. I’m sure it will be trivial to the OP, but the point is that the value **can be changed with the selected attribute** , and it looks more like the elm way to me.
---
### Author:  [@system](https://discourse.elm-lang.org/u/system)
#### Post date: [July 27, 2020, 4:08pm UTC](https://discourse.elm-lang.org/t/how-can-i-reset-a-select-control/6005/6 "2020-07-27T16:08:31Z")
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.