Call attr() instead of prop() to set it to selected
Had this issue in Chrome & Meteor, that I couldn't set an option to selected. This Fix helped.

Had this issue in Chrome & Meteor, that I couldn't set an option to selected. This Fix helped.
Merge pull request #4 from dropfen/master
Call attr() instead of prop() to set it to selected
FezVrasta · dropfen · Fez Vrasta · jesusprubio · Fez Vrasta · arunpoudel
Unified Split

Showing with 214 additions and 37 deletions.

+16 −0 README.md

+42 −6 jquery.dropdown.css

+132 −31 jquery.dropdown.js

+24 −0 package.json
diff --git a/README.md b/README.md
@@ -59,3 +59,19 @@ You may add a new option to the select tag and it will be automatically added to
 ### Let users add options
 
 Add `data-dynamic-opts=true` to the select tag to let users add or remove options.
+
+### Browserify
+
+This library is [UMD](https://github.com/umdjs/umd) compatible, so you can use it in this way:
+
+```javascript
+var jquery = require("jquery");
+require("dropdown.js");
+
+jquery.material.init();
+
+jquery(document).ready(function() {
+    $(".select").dropdown({"optionClass": "withripple"});
+});
+...
+```
diff --git a/jquery.dropdown.css b/jquery.dropdown.css
@@ -10,23 +10,31 @@
   text-overflow: ellipsis;
 }
 .dropdownjs > input.focus ~ ul {
-  transform: scale(1);
+  -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+          transform: scale(1);
 }
 .dropdownjs > ul {
   position: absolute;
   padding: 0;
   margin: 0;
   min-width: 200px;
-  transform: scale(0);
+  -webkit-transform: scale(0);
+      -ms-transform: scale(0);
+          transform: scale(0);
   z-index: 10000;
 }
 .dropdownjs > ul[placement=top-left] {
-  transform-origin: bottom left;
+  -webkit-transform-origin: bottom left;
+      -ms-transform-origin: bottom left;
+          transform-origin: bottom left;
   bottom: 0;
   left: 0;
 }
 .dropdownjs > ul[placement=bottom-left] {
-  transform-origin: top left;
+  -webkit-transform-origin: top left;
+      -ms-transform-origin: top left;
+          transform-origin: top left;
   top: 0;
   left: 0;
 }
@@ -53,7 +61,8 @@ select[data-dropdownjs][disabled] + .dropdownjs > input[readonly] {
 .dropdownjs > ul {
   background: #FFF;
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
-  transition: transform 0.2s ease-out;
+  -webkit-transition: -webkit-transform 0.2s ease-out;
+          transition: transform 0.2s ease-out;
   padding: 10px;
   overflow: auto;
   max-width: 500px;
@@ -83,6 +92,33 @@ select[data-dropdownjs][disabled] + .dropdownjs > input[readonly] {
   text-shadow: 0 1px 0 #fff;
   opacity: .6;
 }
-.dropdownjs > ul > li:h > .close:hover:before {
+.dropdownjs > ul > li:hover > .close:hover:before {
   opacity: .9;
 }
+
+.rtl .dropdownjs > input{
+	padding-right: 0;
+	padding-left: 30px;
+}
+
+.rtl .dropdownjs > ul[placement=top-right] {
+  -webkit-transform-origin: bottom right;
+      -ms-transform-origin: bottom right;
+          transform-origin: bottom right;
+  bottom: 0;
+  left: auto;
+  right: 0;
+}
+.rtl .dropdownjs > ul[placement=bottom-right] {
+  -webkit-transform-origin: top right;
+      -ms-transform-origin: top right;
+          transform-origin: top right;
+  top: 0;
+  left: auto;
+  right: 0;
+}
+.rtl .dropdownjs > ul > li > .close:before {
+  right: auto;
+  left: 15px;
+  float: left;
+}
diff --git a/jquery.dropdown.js b/jquery.dropdown.js
@@ -1,13 +1,28 @@
 /* globals jQuery, window, document */
 
-(function($) {
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS
+        module.exports = factory(require('jquery'));
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+}(function($) {
 
   var methods = {
     options : {
       "optionClass": "",
       "dropdownClass": "",
       "autoinit": false,
       "callback": false,
+      "onSelected": false,
+      "destroy": function(element) {
+        this.destroy(element);
+      },
       "dynamicOptLabel": "Add a new option..."
     },
     init: function(options) {
@@ -34,7 +49,7 @@
 
         // Create the dropdown wrapper
         var $dropdown = $("<div></div>");
-        $dropdown.addClass("dropdownjs").addClass(options.dropdownStyle);
+        $dropdown.addClass("dropdownjs").addClass(options.dropdownClass);
         $dropdown.data("select", $select);
 
         // Create the fake input used as "select" element and cache it as $input
@@ -76,16 +91,25 @@
 
         // If is a single select, selected the first one or the last with selected attribute
         if (!multi) {
-          var $selected;
-          if ($ul.find("[selected]").length) {
-            $selected = $ul.find("[selected]").last();
-          }
-          else {
-            $selected = $ul.find("li").first();
-          }
-          methods._select($dropdown, $selected);
+            var $selected;
+            if ($select.find(":selected").length) {
+                $selected = $select.find(":selected").last();
+            }
+            else {
+                $selected = $select.find("option, li").first();
+               // $selected = $select.find("option").first();
+            }
+            methods._select($dropdown, $selected);
         } else {
-          methods._select($dropdown, $ul.find("[selected]"));
+            var selectors = [], val = $select.val()
+            for (var i in val) {
+              selectors.push(val[i]);
+            }
+            if (selectors.length > 0) {
+              var $target = $dropdown.find(function() { return $.inArray($(this).data("value"), selectors) !== -1; });
+              $target.removeClass("selected");
+              methods._select($dropdown, $target);
+            }
         }
 
         // Transfer the classes of the select to the input dropdown
@@ -155,6 +179,49 @@
 
         });
 
+        $select.on("DOMNodeRemoved", function(e) {
+          var deletedValue = $(e.target).attr('value');
+          $ul.find("li").filter(function() { return $(this).data("value") === deletedValue; }).remove();
+          var $selected;
+
+          setTimeout(function () {
+            if ($select.find(":selected").length) {
+              $selected = $select.find(":selected").last();
+            }
+            else {
+              $selected = $select.find("option, li").first();
+            }
+            methods._select($dropdown, $selected);
+          }, 100);
+
+        });
+
+        // Update dropdown when using val, need to use .val("value").trigger("change");
+        $select.on("change", function(e) {
+          var $this = $(e.target);
+
+          if (!multi) {
+            var $selected;
+            if ($select.find(":selected").length) {
+              $selected = $select.find(":selected").last();
+            }
+            else {
+              $selected = $select.find("option, li").first();
+            }
+            methods._select($dropdown, $selected);
+          } else {
+            var target = $select.find(":selected"),
+                values = $(this).val();
+            // Unselect all options
+            selectOptions.removeClass("selected");
+            // Select options
+            target.each(function () {
+                var selected = selectOptions.filter(function() { return $.inArray($(this).data("value"), values) !== -1; });
+                selected.addClass("selected");
+            });
+          }
+        });
+
         // Used to make the dropdown menu more dropdown-ish
         $input.on("click focus", function(e) {
           e.stopPropagation();
@@ -179,9 +246,9 @@
           // Decide if place the dropdown below or above the input
           if (height < 200 && coords.top > coords.bottom) {
             height = coords.top;
-            $ul.attr("placement", "top-left");
+            $ul.attr("placement", $("body").hasClass("rtl") ? "top-right" : "top-left");
           } else {
-            $ul.attr("placement", "bottom-left");
+            $ul.attr("placement", $("body").hasClass("rtl") ? "bottom-right" : "bottom-left");
           }
 
           $(this).next("ul").css("max-height", height - 20);
@@ -198,16 +265,24 @@
 
           // Close opened dropdowns
           $(".dropdownjs > ul > li").attr("tabindex", -1);
+            if ($(e.target).hasClass('disabled')) {
+              return;
+        }
           $input.removeClass("focus");
         });
       }
 
       if (options.autoinit) {
         $(document).on("DOMNodeInserted", function(e) {
           var $this = $(e.target);
-          if ($this.is("select") && $this.is(options.autoinit)) {
-            initElement($this);
+          if (!$this.is("select")) {
+            $this = $this.find('select');
           }
+            $this.each(function() {
+                if ($(this).is(options.autoinit)) {
+                    initElement($(this));
+                }
+            });
         });
       }
 
@@ -217,16 +292,16 @@
       });
     },
     select: function(target) {
-      var $target = $(this).find("[value=\"" + target + "\"]");
+      var $target = $(this).find(function() { return $(this).data("value") === target; });
       methods._select($(this), $target);
     },
     _select: function($dropdown, $target) {
+
       if ($target.is(".dropdownjs-add")) return;
 
       // Get dropdown's elements
       var $select = $dropdown.data("select"),
           $input  = $dropdown.find("input.fakeinput");
-
       // Is it a multi select?
       var multi = $select.attr("multiple");
 
@@ -238,12 +313,11 @@
         // Toggle option state
         $target.toggleClass("selected");
         // Toggle selection of the clicked option in native select
-        var $selected = $select.find("[value=\"" + $target.attr("value") + "\"]");
-        if ($selected.prop("selected")) {
-          $selected.prop("selected", true);
-        } else {
-          $selected.prop("selected", false);
-        }
+        $target.each(function(){
+          var value = $(this).prop("tagName") === "OPTION" ? $(this).val() : $(this).data("value"),
+              $selected = $select.find("[value=\"" + value + "\"]");
+          $selected.prop("selected", $(this).hasClass("selected"));
+        });
         // Add or remove the value from the input
         var text = [];
         selectOptions.each(function() {
@@ -256,14 +330,26 @@
 
       // Behavior for single select
       if (!multi) {
+        if ($target.hasClass("disabled")) {
+          return;
+        }
         // Unselect options except the one that will be selected
-        selectOptions.not($target).removeClass("selected");
+        if ($target.is("li")) {
+            selectOptions.not($target).removeClass("selected");
+        }
         // Select the selected option
         $target.addClass("selected");
-        // Set the value to the native select
-        $select.val($target.attr("value"));
         // Set the value to the input
-        $input.val($target.text());
+        $input.val($target.text().trim());
+        var value = $target.prop("tagName") === "OPTION" ? $target.val() : $target.data("value");
+        // When val is set below on $select, it will fire change event,
+        // which ends up back here, make sure to not end up in an infinite loop.
+        // This is done last so text input is initialized on first load when condition is true.
+        if (value === $select.val()) {
+          return;
+        }
+        // Set the value to the native select
+        $select.val(value);
       }
 
       // This is used only if Material Design for Bootstrap is selected
@@ -275,13 +361,18 @@
         }
       }
 
+      // Call the callback
+      if (this.options.onSelected) {
+        this.options.onSelected($target.data("value"));
+      }
+
     },
     _addOption: function($ul, $this) {
       // Create the option
       var $option = $("<li></li>");
 
       // Style the option
-      $option.addClass(this.options.optionStyle);
+      $option.addClass(this.options.optionClass);
 
       // If the option has some text then transfer it
       if ($this.text()) {
@@ -292,7 +383,7 @@
         $option.html("&nbsp;");
       }
       // Set the value of the option
-      $option.attr("value", $this.val());
+      $option.data("value", $this.val());
 
       // Will user be able to remove this option?
       if ($ul.data("select").attr("data-dynamic-opts")) {
@@ -305,7 +396,12 @@
 
       // Ss it selected?
       if ($this.prop("selected")) {
-        $option.prop("selected", true);
+        $option.attr("selected", true);
+        $option.addClass("selected");
+      }
+
+      if ($this.prop("disabled")) {
+        $option.addClass("disabled");
       }
 
       // Append option to our dropdown
@@ -314,10 +410,14 @@
       } else {
         $ul.append($option);
       }
+    },
+    destroy: function($e) {
+      $($e).show().removeAttr('data-dropdownjs').next('.dropdownjs').remove();
     }
   };
 
   $.fn.dropdown = function(params) {
+    if( typeof methods[params] == 'function' ) methods[params](this);
     if (methods[params]) {
       return methods[params].apply(this, Array.prototype.slice.call(arguments,1));
     } else if (typeof params === "object" | !params) {
@@ -327,4 +427,5 @@
     }
   };
 
-})(jQuery);
+}));
+