Added multiple pre-select for #50

Author: dnasir

index.html

@@ -364,7 +364,7 @@ <h4>Multiple select</h4>
 				<h4>Phone finder</h4>
 
 				<select class="step1" name="screen" multiple="multiple">
-					<option value="4" selected="selected">4.0"</option>
+					<option value="4">4.0"</option>
 					<option value="4.3">4.3"</option>
 					<option value="4.7">4.7"</option>
 					<option value="5">5.0"</option>
@@ -394,7 +394,7 @@ <h4>Matches <img src="res/ajax-loader.gif" data-bind="visible: loading" /></h4>
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.1/jquery.mockjax.min.js"></script>
 		<script type="text/javascript" src="res/ajax-mocks.js"></script>
-		<script type="text/javascript" src="dist/jquery.cascadingdropdown.min.js"></script>
+		<script type="text/javascript" src="src/jquery.cascadingdropdown.js"></script>
 		<script type="text/javascript">
 			function viewmodel() {
 				this.phones = ko.observableArray([]);
@@ -554,7 +554,11 @@ <h4>Matches <img src="res/ajax-loader.gif" data-bind="visible: loading" /></h4>
 			$('#example4').cascadingDropdown({
 				selectBoxes: [
 					{
-						selector: '.step1'
+						selector: '.step1',
+                        selected: [1, 2],
+                        onChange: function(e, selected) {
+                            console.log(selected)
+                        }
 					},
 					{
 						selector: '.step2',

src/jquery.cascadingdropdown.js

@@ -215,13 +215,13 @@
                 return;
             }
 
-            var selected;
+            var selected = [];
 
             // Add all items as dropdown item
             var getOption = function(item) {
               var selectedAttr = '';
               if(item.selected) {
-                selected = item;
+                selected.push(item.value.toString());
               }
 
               return '<option value="' + item.value + '"' + selectedAttr + '>' + item.label + '</option>';
@@ -248,7 +248,7 @@
             self.enable();
 
             // If a selected item exists, set it as default
-            selected && self.setSelected(selected.value.toString());
+            selected.length && self.setSelected(selected);
 
             self._triggerReady();
         },
@@ -273,19 +273,43 @@
             if(typeof triggerChange === 'undefined') {
                 triggerChange = true;
             }
-
-            // If given value is a string, get the index where it appears in the dropdown
-            if(typeof indexOrValue === 'string') {
-                indexOrValue = dropdownItems.index(dropdownItems.filter(function() { return this.value === indexOrValue; })[0]);
+            
+            var selectedItems = [];
+            
+            // check if indexOrValue is an array
+            if($.isArray(indexOrValue)) {
+                selectedItems = indexOrValue;
+            } else {
+                selectedItems = selectedItems.concat(indexOrValue);
             }
 
-            // If index is undefined or out of bounds, do nothing
-            if(indexOrValue === undefined || indexOrValue < 0 || indexOrValue > dropdownItems.length) {
-                return;
-            }
+            var selectedValue;
+            if(self.el.is('[multiple]')) {
+                selectedValue = selectedItems.map(function(item) {
+                    if(typeof item === 'number'
+                        && (item !== undefined 
+                        && item > -1 
+                        && item < dropdownItems.length)) {
+                        return dropdownItems[item].value
+                    }
+                    
+                    return item;
+                });
 
+            } else {
+                selectedValue = selectedItems[0];
+
+                // if selected item is a number, get the value for the item at that index
+                if(typeof selectedItems[0] === 'number' 
+                    && (selectedItems[0] !== undefined 
+                    && selectedItems[0] > -1 
+                    && selectedItems[0] < dropdownItems.length)) {
+                    selectedValue = dropdownItems[selectedItems[0]].value;
+                }
+            }
+            
             // Set the dropdown item
-            self.el[0].selectedIndex = indexOrValue;
+            self.el.val(selectedValue);
 
             // Trigger change event
             if(triggerChange) {