Fixed select() issue with existing dropdown

JimishF · JimishF · commit b7d5d2b01188 · 2017-03-24T18:16:05.000+05:30
diff --git a/lib/addons/p5.dom.js b/lib/addons/p5.dom.js
@@ -188,7 +188,10 @@
       return converted;
     } else if (elt.tagName === "VIDEO" || elt.tagName === "AUDIO") {
       return new p5.MediaElement(elt);
-    } else {
+    } else if ( elt.tagName === "SELECT" ){
+      return createSelect( new p5.Element(elt) );
+    } 
+    else {
       return new p5.Element(elt);
     }
   }
@@ -525,6 +528,7 @@
 
   /**
    * Creates a dropdown menu &lt;select&gt;&lt;/select&gt; element in the DOM.
+   * It also helps to asssign select-box methods to p5.Element when selecting existing select box
    * @method createSelect
    * @param {boolean} [multiple] true if dropdown should support multiple selections
    * @return {Object|p5.Element} pointer to p5.Element holding created node
@@ -550,12 +554,19 @@
    * }
    * </code></div>
    */
+
   p5.prototype.createSelect = function(mult) {
-    var elt = document.createElement('select');
-    if (mult){
-      elt.setAttribute('multiple', 'true');
+
+    if( typeof mult === 'object' && mult.elt.nodeName == 'SELECT' ){
+      var self = mult;
+      var elt = this.elt = mult.elt;
+    }else{
+      var elt = document.createElement('select');
+      if( mult && typeof mult === 'boolean' ){
+        elt.setAttribute('multiple', 'true');
+      }
+      var self = addElement(elt, this);
     }
-    var self = addElement(elt, this);
     self.option = function(name, value){
       var opt = document.createElement('option');
       opt.innerHTML = name;
diff --git a/test/manual-test-examples/addons/p5.dom/selectbox_test/index.html b/test/manual-test-examples/addons/p5.dom/selectbox_test/index.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <script language="javascript" type="text/javascript" src="../../../../../lib/p5.js"></script>
+    <script language="javascript" type="text/javascript" src="../../../../../lib/addons/p5.dom.js"></script>
+    <script language="javascript" src="sketch.js"></script>
+  </head>
+
+  <body>
+  </body>
+</html>
diff --git a/test/manual-test-examples/addons/p5.dom/selectbox_test/sketch.js b/test/manual-test-examples/addons/p5.dom/selectbox_test/sketch.js
@@ -0,0 +1,15 @@
+function setup() {
+ // Created a dropdown in DOM 
+  var dropdown = createSelect();
+    dropdown.option('apple');
+    dropdown.option('mango');
+    dropdown.id("fruitlist");
+  console.log( dropdown ); 
+
+// Selected a dropdown from DOM
+  var dropdown = select('#fruitlist');
+    dropdown.option('applex');
+    dropdown.option('mangox');
+  console.log( dropdown );
+
+}
