How to create a dropdown list in phoenix

Phoenix Forum Questions / Help
1

When the list appears in the browser, only the first word appears.
example: “American History” appears as “American”

@titlelist

["American History", "Art", "Art", "Arts & Crafts", "Chemistry",
"Chess & Games", "Cooking", "Early American History", "Electronics",
"Environmental Science", "Fabric Arts", "Gym", "History", "IEW", "Jr Drama",
"Jr Volleyball", "Logic of Chess", "Lunch & Gym", "Middle Ages", "Music",
"Music & Movement", "Nonfiction Writing", "Nursery", "Nutritional Science",
"Phonics", "Recorder", "Science", "Science & Scripture", "Show & Tell",
"Spanish 1", "Speech", "Sr Drama", "Sr Volleyball", "States & Capitals",
"Study hall", "Thinking Games", "Writing"]

controller code

conn
|> assign(:titlelist, classtitlelist) # a list of class titles to eventually serve as a pick list - there may be multiple classes with that title
|> assign(:firstname, firstname)
|> assign(:lastname, lastname)
|> assign(:classes, classes) # a list of classes - each class is a list
|> render("index.html")

where there are 4 classes for this student - title, section, period, fee, teacher, helper1, helper2

[
["Logic of Chess", "7-8", "9:30 AM", "fee unknown", 1, "Theresa Laughlin", "Katie Hickman", "Randi Horst"],
["Electronics", "7-8", "10:30 AM", "fee unknown", 1, "Holly Grubbs", "Theresa Laughlin", "April Martella"],
["Writing", "7-8", "12:00 PM", "fee unknown", 1, "Jean VanderPlaats", "Katie Ward", "Bethany Hall"],
["Music", "9-12", "12:00 PM", "fee unknown", 1, "Kristine Masters", "Andrea McGee", "Ami Bondi"]
]

template code

<p>
  <strong><%= @firstname %> <%= @lastname %></strong>
  <% classes_length = length(@classes) - 1 %>
</p>

<% # make a drop down list of titles %>
<% # purpose is to display all classes for a title %>

<form method="get">
  <label for="classes">List of classes:</label>
  <input list="classtitles" name="classtitle" id="classtitle" />

  <datalist id="classtitles">
    <%= for i <- 0..Enum.count(@titlelist)-1 do %>
      <option value=<%= Enum.at(@titlelist,i) %>>
    <% end %>
  </datalist>
  <input type="submit" />
</form>

<style>

table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}

th, td {
padding: 6px;
}
</style>

<table>
  <tr>
    <th>Class title</th>
    <th>Section</th>
    <th>Period</th>
    <th>Fee</th>
    <th>Semester</th>
    <th>Teacher</th>
    <th>Helper1</th>
    <th>Helper2</th>
  </tr>

  <%= for {class, i} <- Enum.with_index(@classes,0) do%>
    <tr>
      <%= for {item, k} <- Enum.with_index(class,1) do%>
        <td> <%= item %> </td>
      <% end %>
    </tr>
  <% end %>
</table>
2

(note: I added triple-backticks ``` for formatting and cleaned up some indentation in your post)

This line is the problem - without quotes, a multi-word title “leaks” into the surrounding HTML. For instance, the option for "American History" will produce this HTML:

<option value=American History>
3

As a minor code improvement thing: In Elixir it’s not idiomatic (or performant) to do index based operations with lists this way. The code will read better and be faster if you do:

    <%= for title <- @titlelist do %>
      <option value="<%= title %>">
    <% end %>
3 Likes
4

This is something that worked for me handling

Note that I was using the 'heex' extension.

<datalist class="form-control" id="classtitles" hidden>
     <%= for list <-@titlelist do %>
           <option value={list.titlelist}></option>
     <% end %>
</datalist>
5

Thank you much.

1 Like