Kurisu
How can I add "disabled" attribute to a Phoenix.HTML.Form select prompt option?
I’m using materialize_css as view style in my templates.
So I would like to generate something like this:
<select class="" id="form_choice" name="form[choice]">
<option value="" disabled selected>Choose a color</option>
<option value="white">white</option>
<option value="black">black</option>
<option value="gray">gray</option>
</select>
but I’m not finding where I could add the attribute “disabled” for the option set with “prompt” key.
Please, how can I transform something like
select :form, :choice, [:white, :black, :gray], prompt: "Choose a color"
to have the attribute “disabled” set on the prompt option ?
In the docs I see I can use with select, options such as :key, :value, :disabled but it does not work for the prompt option.
Marked As Solved
Gazler
Here’s an example from the docs:
select(form, :role, [[key: "Admin", value: "admin", disabled: true],
[key: "User", value: "user"]])
#=> <select id="user_role" name="user[role]">
<option value="admin" disabled="disabled">Admin</option>
<option value="user">User</option>
</select>
Generates a select tag with the given
options.
optionsare expected to be an enumerable which will be used to generate each respectiveoption. The enumerable may have:
- keyword lists - each keyword list is expected to have the keys
:keyand:value. Additional keys such as:disabledmay be given to customize the option
Also Liked
LostKobrakai
Disabling the default option is usually done to force the user to select a different option. It’s kinda like setting required on input fields.
Kurisu
@Gazler
Thank you, finally I managed the options to work even with optgroups. Probably I was passing wrong keyword list to the select/4 helper.
Now I can use something like:
[
[key: "Choose a color", value: "", disabled: true],
set1: [
[key: "White", value: "white"],
[key: "Black", value: "black"],
[key: "Gray", value: "gray"]
],
set2: [
[key: "Blue", value: "blue"],
[key: "Red", value: "red"],
[key: "Green", value: "green"]
]
]
or even shorter ![]()
[
[key: "Choose a color", value: "", disabled: true],
set1: [:white, :black, :gray],
set2: [:blue, :red, :green]
]
And with the following function I’m able able to better automate the whole thing. ^^
def collection(options, prompt \\ "Please choose an option", disabled \\ true),
do: [[key: prompt, value: "", disabled: disabled]] |> Enum.concat(options)
The param “options” can be anything I would pass as options to select/4
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









