prashantchaudhary · astterx · Jan 23, 2019 · Jan 23, 2019 · Jan 24, 2019
diff --git a/README b/README
@@ -1,8 +1,5 @@
-ddSlick
-Author: Prashant Chaudhary (http://designwithpc.com)
-Plugin Demo & Documentation: http://designwithpc.com/Plugins/ddSlick
-
 A free light weight jQuery plugin that allows you to create a custom drop down with images and description.
+Plugin Demo & Documentation: http://designwithpc.com/Plugins/ddSlick
 
 About this plugin:
 
@@ -11,8 +8,12 @@ Allows JSON to populate the drop down options.
 Converts your HTML select element to ddSlick.
 Uses Minimum css and no external stylesheets to download.
 Supports callback functions on selection.
+Inherit onchange attribute from original element
+Trigger onchange for hidden input
 Works as good even without images or description!
 
 Why is this plugin useful:
 
-With traditional drop downs i.e. using <select> <option> </option> </select> you are limited to only text and value. But with this easily configurable jquery plugin, you can now create a custom drop down that can very well include images, a short description, along with your usual text and value. Take a look at the following demos in action.
+With traditional drop downs i.e. using <select> <option> </option> </select> you are limited to only text and value. But with this easily configurable jquery plugin, you can now create a custom drop down that can very well include images, a short description, along with your usual text and value. Take a look at the following demos in action.
+
+Author: Prashant Chaudhary (http://designwithpc.com)
diff --git a/examples/data.js b/examples/data.js
@@ -0,0 +1,36 @@
+var ddData = [
+    {
+        text: "Facebook",
+        value: 1,
+        selected: false,
+        description: "Description with Facebook",
+        imageSrc: "http://i.imgur.com/XkuTj3B.png"
+    },
+    {
+        text: "Twitter",
+        value: 2,
+        selected: false,
+        description: "Description with Twitter",
+        imageSrc: "http://i.imgur.com/8ScLNnk.png"
+    },
+    {
+        text: "LinkedIn",
+        value: 3,
+        selected: false,
+        description: "Description with LinkedIn",
+        imageSrc: "http://i.imgur.com/aDNdibj.png"
+    },
+    {
+        text: "Foursquare",
+        value: 4,
+        selected: false,
+        description: "Description with Foursquare",
+        imageSrc: "http://i.imgur.com/kFAk2DX.png"
+    }
+];
+var ddBasic = [
+    { text: "Facebook", value: 1, },
+    { text: "Twitter", value: 2, },
+    { text: "LinkedIn", value: 3, },
+    { text: "Foursquare", value: 4, }
+];
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>TODO supply a title</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script type="text/javascript" src="../jquery.ddslick.js"></script>
+    <script type="text/javascript" src="data.js"></script>
+  </head>
+  <body>
+    <p>basic</p>
+    <select id="demoBasic"></select>
+    <p>create/destroy</p>
+    <select id="htmlSelect"></select>
+    <p>get selected</p>
+    <select id="demoGetSelected"></select>
+    <p>set selected</p>
+    <select id="demoSetSelected"></select>
+    <p>callback function</p>
+    <select id="demoCallback"></select>
+    <p>default selection</p>
+    <select id="demoDefaultSelection"></select>
+    <p>image right</p>
+    <select id="demoImageRight"></select>
+    <p>truncated</p>
+    <select id="demoTruncated"></select>
+    <p>no image</p>
+    <select id="demoNoImage"></select>
+
+    <script type="text/javascript">
+      $('#demoBasic').ddslick({
+        data: ddData,
+        width: 300,
+        imagePosition: "left",
+        selectText: "Select your favorite social network"
+      });
+      $('#htmlSelect').ddslick({
+        data: ddData,
+        width: 300,
+        imagePosition: "left",
+        selectText: "Select your favorite social network"
+      });
+      $('#demoGetSelected').ddslick({
+        data: ddData,
+        width: 300,
+        imagePosition: "left",
+        selectText: "Select your favorite social network"
+      });
+      $('#demoSetSelected').ddslick({
+        data: ddData,
+        width: 300,
+        imagePosition: "left",
+        selectText: "Select your favorite social network"
+      });
+      $('#demoCallback').ddslick({
+        data: ddData,
+        width: 300,
+        imagePosition: "left",
+        selectText: "Select your favorite social network",
+        onSelected: function (data) {
+          alert(data.selectedData.text);
+        }
+      });
+      $('#demoDefaultSelection').ddslick({
+        data: ddData,
+        width: 300,
+        defaultSelectedIndex: 2,
+        imagePosition: "left",
+        selectText: "Select your favorite social network",
+        onSelected: function (data) {
+          console.log(data);
+        }
+      });
+      $('#demoImageRight').ddslick({
+        data: ddData,
+        width: 300,
+        imagePosition: "right",
+        selectText: "Select your favorite social network"
+      });
+      $('#demoTruncated').ddslick({
+        data: ddData,
+        width: 300,
+        imagePosition: "left",
+        selectText: "Select your favorite social network"
+      });
+      $('#demoNoImage').ddslick({
+        data: ddBasic,
+        width: 300,
+        imagePosition: "left",
+        selectText: "Select your favorite social network"
+      });
+    </script>
+  </body>
+</html>
diff --git a/jquery.ddslick.js b/jquery.ddslick.js
@@ -1,8 +1,13 @@
-//Title: Custom DropDown plugin by PC
-//Documentation: http://designwithpc.com/Plugins/ddslick
-//Author: PC 
-//Website: http://designwithpc.com
-//Twitter: http://twitter.com/chaudharyp
+/**
+ * original by Prashant Chaudhary
+ * github   : https://github.com/prashantchaudhary
+ * website  : http://designwithpc.com/Plugins/ddSlick
+ * source   : https://github.com/prashantchaudhary/ddslick
+ * 
+ * comments by creator regarding licensing https://github.com/prashantchaudhary/ddslick/issues/39
+ * https://web.archive.org/web/20180109091745/https://github.com/prashantchaudhary/ddslick/issues/39
+ * 
+ */
 
 (function ($) {
 
@@ -98,7 +103,7 @@
                 else options.data = $.merge(ddSelect, options.data);
 
                 //Replace HTML select with empty placeholder, keep the original
-                var original = obj, placeholder = $('<div').attr('id', obj.attr('id') + '-dd-placeholder');
+                var original = obj, placeholder = $('<div>').attr('id', obj.attr('id') + '-dd-placeholder');
                 obj.replaceWith(placeholder);
                 obj = placeholder;
 
@@ -108,6 +113,7 @@
                 // Inherit name attribute from original element
                 obj.find("input.dd-selected-value")
                     .attr("id", $(original).attr("id"))
+                    .attr("onchange", $(original).attr("onchange"))
                     .attr("name", $(original).attr("name"));
 
                 //Get newly created ddOptions and ddSelect to manipulate
@@ -165,7 +171,7 @@
 
                 //Selecting an option
                 obj.find('.dd-option').on('click.ddslick', function () {
-                    selectIndex(obj, $(this).closest('li').index());
+                    selectIndex(obj, $(this).closest('li').index(), true);
                 });
 
                 //Click anywhere to close
@@ -238,7 +244,7 @@
     }
 
     //Private: Select index
-    function selectIndex(obj, index) {
+    function selectIndex(obj, index, changed = false) {
 
         //Get plugin data
         var pluginData = obj.data('ddslick');
@@ -290,6 +296,11 @@
         //Callback function on selection
         if (typeof settings.onSelected == 'function') {
             settings.onSelected.call(this, pluginData);
+        } 
+
+        //Trigger change
+        if (changed) {
+            ddSelectedValue.trigger('change');
         }
     }