diff --git a/README b/README
index 0a88fc1..5fa76d0 100644
--- 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 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.
\ No newline at end of file
+With traditional drop downs i.e. using 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
new file mode 100644
index 0000000..b4d2aad
--- /dev/null
+++ 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
new file mode 100644
index 0000000..b16b8d8
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,95 @@
+
+
+
+ TODO supply a title
+
+
+
+
+
+
+
+
basic
+
+
create/destroy
+
+
get selected
+
+
set selected
+
+
callback function
+
+
default selection
+
+
image right
+
+
truncated
+
+
no image
+
+
+
+
+
diff --git a/jquery.ddslick.js b/jquery.ddslick.js
index 2cdfbb5..4cd72ea 100644
--- 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 = $('
').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');
}
}
diff --git a/jquery.ddslick.min.js b/jquery.ddslick.min.js
index 6a7191f..5759bc2 100644
--- a/jquery.ddslick.min.js
+++ b/jquery.ddslick.min.js
@@ -1 +1 @@
-(function(e){e.fn.ddslick=function(l){if(c[l]){return c[l].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof l==="object"||!l){return c.init.apply(this,arguments)}else{e.error("Method "+l+" does not exists.")}}};var c={},d={data:[],keepJSONItemsOnTop:false,width:260,height:null,background:"#eee",selectText:"",defaultSelectedIndex:null,truncateDescription:true,imagePosition:"left",showSelectedHTML:true,clickOffToClose:true,embedCSS:true,onSelected:function(){}},i='