Continued work on Elements; work in progress commit.

javascript/src/Element/Element.js

@@ -21,6 +21,13 @@ if (!QfqNS.Element) {
         this.formGroup = new n.FormGroup($element);
     };
 
+    /**
+     *
+     * @param type
+     * @returns {boolean}
+     *
+     * @protected
+     */
     n.Element.prototype.isType = function (type) {
         var lowerCaseType = type.toLowerCase();
         var isOfType = true;
@@ -33,7 +40,10 @@ if (!QfqNS.Element) {
                     return false;
                 }
             } else {
-                if (lowerCaseType === 'text') {
+                // <select> is not an attribute value, obviously, so check for nodename
+                if (this.nodeName.toLowerCase() === lowerCaseType) {
+                    return true;
+                } else if (lowerCaseType === 'text') {
                     return true;
                 } else {
                     isOfType = false;

javascript/src/Element/FormGroup.js

@@ -19,7 +19,7 @@ if (!QfqNS.Element) {
         }
 
         this.$formGroup = this.$findFormGroup($enclosedElement);
-        this.$element = this.$formGroup.find('input');
+        this.$element = this.$formGroup.find('input, select');
         this.$label = this.$formGroup.find('.control-label');
         this.$helpBlock = this.$formGroup.find(".help-block");
     };
@@ -53,4 +53,13 @@ if (!QfqNS.Element) {
         return this.$helpBlock.length > 0;
     };
 
+    n.FormGroup.prototype.setEnabled = function (enabled) {
+        this.$element.prop('disabled', !enabled);
+    };
+
+    n.FormGroup.prototype.setReadOnly = function (readonly) {
+        this.$element.propr('readonly', readonly);
+    };
+
+
 })(QfqNS.Element);
\ No newline at end of file

javascript/src/Element/Select.js

+/**
+ * @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
+ */
+/* global $ */
+
+
+if (!QfqNS) {
+    var QfqNS = {};
+}
+
+if (!QfqNS.Element) {
+    QfqNS.Element = {};
+}
+
+(function (n) {
+    'use strict';
+
+
+    /**
+     *
+     * @param $element
+     * @constructor
+     */
+    function Select($element) {
+        n.Element.call(this, $element);
+
+        if (!this.isType("select")) {
+            throw new Error("$element is not of type 'select'");
+        }
+    }
+
+    Select.prototype = Object.create(n.Element.prototype);
+    Select.prototype.constructor = Select;
+
+    /**
+     * Set the value or selection of a `<select>` tag
+     *
+     * @param {string|array} val when passing a string, the corresponding <option> tag will get selected. If passed
+     * array of objects, `<select>` will have its `<option>` tags set correspondingly.
+     */
+    Select.prototype.setValue = function (val) {
+        if (typeof(val) in ['string', 'number']) {
+            this.setSelection(val);
+        } else if (Array.isArray(val)) {
+            this.formGroup.$element.empty();
+
+            // Fill array with new <select> elements first and add it to the dom in one step, instead of appending
+            // each '<select>' separately.
+            var selectArray;
+            val.forEach(function (selectObj) {
+                var $option = $('<option>')
+                    .addAttribute('value', selectObj.value ? selectObj.value : selectObj.text)
+                    .prop('selected', selectObj.selected ? selectObj.selected : false)
+                    .append(selectObj.text);
+                selectArray.append($option);
+            });
+            this.formGroup.$element.append(selectArray);
+        } else {
+            throw Error('Unsupported type of argument in Select.setValue: "' + typeof(val) + '". Expected either' +
+                ' "string" or "array"');
+        }
+    };
+
+    /**
+     *
+     * @param val
+     *
+     * @private
+     */
+    Select.prototype.setSelection = function (val) {
+        this.clearSelection();
+
+        // First, see if we find an <option> tag having an attribute 'value' matching val. If that doesn't work,
+        // fall back to comparing text content of <option> tags.
+        var $selectionByValue = this.formGroup.$element.find('option[value=' + val);
+        if ($selectionByValue.length > 0) {
+            $selectionByValue.prop('selected', true);
+        } else {
+            this.formGroup.$element.find('option').each(function () {
+                var $element = $(this);
+                if ($element.text() === val) {
+                    $element.prop('selected', true);
+                }
+
+                return true;
+            });
+        }
+    };
+
+    /**
+     * @private
+     */
+    Select.prototype.clearSelection = function () {
+        this.formGroup.$element.find(':selected').each(function () {
+            $(this).prop('selected', false);
+        });
+    };
+
+    Select.prototype.getValue = function () {
+        var returnValue = [];
+        this.formGroup.$element.find(':selected').each(
+            function () {
+                if (this.hasAttribute('value')) {
+                    returnValue.push(this.getAttribute('value'));
+                } else {
+                    returnValue.push($(this).text());
+                }
+            }
+        );
+
+        return returnValue;
+    };
+
+    n.Select = Select;
+
+})(QfqNS.Element);
\ No newline at end of file