Problem with getting the value of a <select> tag.

[Manoj Waikar]

Hi,

I have the below code -

;; dom identifiers
(def ^:dynamic *level-option* ["#level"])
(def ^:dynamic *directions* ["#directions"])
(def ^:dynamic *start-button* ["#start"])

(defn- by-id [id]
  (.getElementById js/document id))

(defn- generate-option-tag [option value]
  [:option {:value value} option])

(defn- get-option-value []
  ;; (em/from js/document
  ;;          *level-option* (em/get-prop :value))
  (em/from (by-id "select#level") (em/get-prop :value))
  )

(defn generate-options []
  (h/html (map generate-option-tag difficulty-levels (range 1 4))))

(defn append-directions-and-levels []
  (em/at js/document
         *directions* (em/content directions)
         *level-option* (em/append (generate-options))))

(em/defaction setup-events []
  *level-option* (em/listen :change #(js/alert (get-option-value)))
  *start-button* (em/listen :click #(js/alert "clicked")))

(defn start []
  (append-directions-and-levels)
  (setup-events))

(set! (.-onload js/window) start)

The highlighted code above gives -
1) {} when used with the js/document *level-option* (commented code)
2) null when used in conjunction with the by-id function

So -
1) what is wrong with the above code? And how to get the selected index or value?
2) Is there a shorter way to get the value rather than the below function?

(em/from js/document
             *level-option* (em/get-prop :value))

Thanks for any help.

Regards,
Manoj.

[ckirkendall]

Below is the code you are looking for.  The key is you have cycle through the options and filter the :selected values.

(em/from js/document
        :option ["#level option"] (em/filter :selected
                                                (em/get-prop :value)))

Creighton Kirkendall

[Manoj Waikar]

Ah! Thanks a lot Creighton, I would never have figured that out by myself :)
Do you think we should mention this in the docs, because it is not very intuitive?

Regards,
Manoj.

[ckirkendall]

Sorry for not replying sooner its been crazy lately.  I do have an example similar to this in the documentation but its with check boxes.  You can find it by clicking on start, choosing "Documentation/Demos" and selecting "Get Data from the DOM."  If I get a chance I will add the select box to the form.

CK