Clojure - Hiccup Dropdown menu

Question

I have a Clojure table in Hiccup that is populated from a database. In one column I have status which is set from the database.

What I want to do is be able to click on this value, and have a dropdown menu appear where you can pick a new status from the dropdown menu.

I am confused on how to do this. I have tried using a form with a placeholder where the value comes from the database but when I click on the status in the browser, I have to type instead of having a dropdown. How do I get the dropdown?

(defn row-data [data]
  (for [x data]
    (let [[entity-id id date text status] job]
      (hiccup/html
        [:tr
         [:td date]
         [:td id]
         [:td text]
         [:form {:method :post}
          [:td 
           [:input {:type :text :placeholder status}]]]
         ]))))

Any help would be much appreciated. Thanks

Please add the code, with what you have tried – cfrick May 18 '17 at 08:24 — cfrick, May 18 '17 at 08:24

fevgenym · Accepted Answer · 2017-05-18T12:24:22.613

If I understood your task, you don't need to use [:input] with {:type :text}, if you don't want to type into field. Try using (drop-down attr-map? name options) instead.

https://weavejester.github.io/hiccup/hiccup.form.html

Also you can try to make your form look like this:

[:form {:action "/handler_name"}
 [:td
   [:select {:name (str "update_status_" id)}
    [:option {:value "1"} "1"]
    [:option {:value "2"} "2"]
    [:option {:value "3"} "3"]
    [:option {:value "4"} "4"]]
   [:input {:type "submit"} "Update"]]]

score 0 · Answer 2 · answered Feb 22 '20 at 22:41

You need a vector like this one:

 (def countries [["Mexico" 6]["Argentina" 5]
                 ["Chile" 3]["Colombia" 2]])

And so:

  (:require
        [hiccup.core :as c]
        [hiccup.form :as f]

  [:div.div-separator (f/drop-down {:class "form-class"} "country_id" countries)]

If you have a map with the info you can create the vector using the reduce function:

(let [my-vector (reduce #(conj %1 [(:name %2) (:id %2)]) [] my-big-map)])

Clojure - Hiccup Dropdown menu

2 Answers2