Phoenix Nested Select Input

Phoenix Forum Questions / Help
1

Is it possible to reload another select input based on the value previously selected in another input?
EX:

Category and Sub-Category.
Both return a key/value list to choose in a select input.

  <div class="form-group">
    <%= label f, gettext("Category"), class: "control-label" %>
    <%= select f, :data_type, App.choose_category(), value: App.from_map(f,:data,"category"), name: "template[data][category]", class: "form-control" %>
    <%= error_tag f, :data_category %>
  </div>

  <div class="form-group">
    <%= label f, gettext("Sub Category"), class: "control-label" %>
    <%= select f, :data_objective, App.choose_sub_category(SELECTED_CATEGORY), value: App.from_map(f,:data,"subcategory"), name: "template[data][subcategory]", class: "form-control" %>
    <%= error_tag f, :data_subcategory %>
  </div>
2

Are you wanting to do it server side (page refresh, or use Drab or Unpoly or so) or are you wanting to do it client-side (that is just normal html/javascript stuff then, nothing to do with phoenix)?

3

I think this is pretty easily done client-side with JavaScript, server-side might be a little tricky. Here’s a quick demo I made a little while ago for this exact situation: https://jsfiddle.net/jswny/wxkutv7L/.

1 Like
4

I’m trying to do this using view functions and recovering data from a database, but i’m missing how to pass the key from the root select to the function that fills the nested select.
I’m asking because I don’t want to do POST through javascript.
I’m still newbie.
Thanks