Re-added selected option property

Use this to programmatically set a dropdown item as selected on init.
Value can be string that matches the value of the targeted dropdown
item, or integer that matches the dropdown item index.

Author: dnasir

README.md

@@ -141,6 +141,16 @@ If this value is set to false, this dropdown will be enabled if any one of the r
 
 Required dropdown value parameter name used in Ajax requests. If this value is not set, the plugin will use the dropdown name attribute. If neither this parameter nor the name attribute is set, this dropdown will not be taken into account in any Ajax request.
 
+##### selected (string|integer)
+
+    selected: 'red'
+
+    selected: 2
+
+<sub>Added: 1.1.5</sub>
+
+Sets the default dropdown item on initialisation. The value can be a the value of the targeted dropdown item, or its index value. 
+
 ##### onChange (eventHandler)
 
     onChange: function(event, value, requiredValues) { }

demo.html

@@ -54,6 +54,8 @@ <h1>jQuery Cascading Dropdown <small>Examples</small></h1>
 			<h4>Basic</h4>
 			<p>This is a basic dropdown setup where the second dropdown is dependent on the first dropdown having a value, and the third dropdown is dependent on either the first or second one having a value.</p>
 
+			<p>This example also shows how you can set the selected dropdown item when you initialise the plugin. This can be done either in code, or by including the HTML selected attribute on the targeted dropdown item.</p>
+
 			<div id="example1" class="bs-docs-example">
 				<h4>Phone finder</h4>
 
@@ -66,7 +68,7 @@ <h4>Phone finder</h4>
 				</select>
 				<select class="step2" name="resolution">
 					<option value="">Screen resolution</option>
-					<option value="540">540p</option>
+					<option value="540" selected>540p</option>
 					<option value="720">720p</option>
 					<option value="1080">1080p</option>
 				</select>
@@ -93,7 +95,8 @@ <h6>Code</h6>
 <pre class="brush: js">$('#example1').cascadingDropdown({
 	selectBoxes: [
 		{
-			selector: '.step1'
+			selector: '.step1',
+			selected: '4.3'
 		},
 		{
 			selector: '.step2',
@@ -213,9 +216,6 @@ <h4>Phone finder</h4>
 				</select>
 				<select class="step2" name="resolution">
 					<option value="">Screen resolution</option>
-					<option value="540">540p</option>
-					<option value="720">720p</option>
-					<option value="1080">1080p</option>
 				</select>
 				<select class="step3" name="storage">
 					<option value="">Storage size</option>
@@ -297,7 +297,8 @@ <h6>Code</h6>
 			$('#example1').cascadingDropdown({
 				selectBoxes: [
 					{
-						selector: '.step1'
+						selector: '.step1',
+						selected: '4.3'
 					},
 					{
 						selector: '.step2',
@@ -379,7 +380,18 @@ <h6>Code</h6>
 						selector: '.step1'
 					},
 					{
-						selector: '.step2'
+						selector: '.step2',
+						source: function(request, response) {
+							$.getJSON('/api/resolutions', request, function(data) {
+								response($.map(data, function(item, index) {
+									return {
+										label: item + 'p',
+										value: item,
+										selected: index == 0
+									};
+								}));
+							});
+						}
 					},
 					{
 						selector: '.step3',

jquery.cascadingdropdown.js

@@ -146,6 +146,11 @@
             // Disable it first
             self.disable();
 
+            // Set selected dropdown item if defined
+            if(!self.initialised) {
+                self.options.selected && self.setSelected(self.options.selected);
+            }
+
             // If required dropdowns have no value, return
             if(!self._requirementsMet()) {
                 self._triggerReady();
@@ -248,12 +253,10 @@
             // Set the dropdown item
             self.el[0].selectedIndex = indexOrValue;
 
-            if(!triggerChange) {
-                return;
-            }
-
             // Trigger change event
-            self.el.change();
+            if(triggerChange) {
+                self.el.change();
+            }
 
             return self.el;
         }
@@ -269,6 +272,8 @@
         _init: function() {
             var self = this;
 
+            self.pending = 0;
+
             // Instance array
             self.dropdowns = [];
 
@@ -284,15 +289,17 @@
                     self.options.onReady.call(self, event, self.getValues());
                 }
             }
+
+            function changeEventHandler(event) {
+                self.options.onChange.call(self, event, self.getValues());
+            }
 
             if(typeof self.options.onReady === 'function') {
                 dropdowns.bind('ready', readyEventHandler);
             }
 
             if(typeof self.options.onChange === 'function') {
-                dropdowns.change(function(event) {
-                    self.options.onChange.call(self, event, self.getValues());
-                });
+                dropdowns.bind('change', changeEventHandler);
             }
 
             // Init dropdowns