Show a select field only when a specific element was chosen from another select element list

Phoenix Forum Questions / Help
, ,
1

I am wondering how to achieve this.

I have a list of types. Depending on a chosen type, either another select element will appear in the form or not.

For example, if type Page or Collection are chosen, another select field will appear under, listing all the pages.

For now I have this and I am not sure how to achieve my goal.

   <div class="form-group mb-3">
     <div>
         <%= select f, :type, ["Page": 1, "Category": 2, "Collection": 3, "Link": 4], placeholder: "Choose a type"%>
         <%= error_tag f, :type %>
     </div>
   </div>
2

You need to handle that on the client. You could use liveview or any kind of JS solution for that. This cannot be done using just elixir on the server / html for the client.

3

Thank’s for your reply. So, let’s say I want to use jquery’s hide() and show(). I should set an id for the element Page and Collection, in order to be able to cast those functions on those elements. Any suggestions how can I do this?

4

You can find how to add custom attributes to options in the documentation:

https://hexdocs.pm/phoenix_html/3.0.4/Phoenix.HTML.Form.html#select/3

1 Like
5

As I understand I’ve already added custom attributes -
[“Page”: 1, “Category”: 2, “Collection”: 3, “Link”: 4]