workaround selectedOptions on IE

closes #771
dc-js · Aug 18, 2015 · aa3e299 · aa3e299
1 parent f8627e9
commit aa3e299
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 19 deletions.
diff --git a/dc.js b/dc.js
diff --git a/dc.js.map b/dc.js.map
diff --git a/dc.min.js b/dc.min.js
diff --git a/dc.min.js.map b/dc.min.js.map
diff --git a/src/select-menu.js b/src/select-menu.js
@@ -104,10 +104,23 @@ dc.selectMenu = function (parent, chartGroup) {
     }
 
     function onChange (d , i) {
-        var selectedOptions = Array.prototype.slice.call(d3.event.target.selectedOptions);
-        var values = selectedOptions.map(function (d) {
-            return d.value;
-        });
+        var values;
+        var target = d3.event.target;
+        if(target.selectedOptions) {
+            var selectedOptions = Array.prototype.slice.call(target.selectedOptions);
+            values = selectedOptions.map(function (d) {
+                return d.value;
+            });
+        } else { // IE and other browsers do not support selectedOptions
+            // adapted from this polyfill: https://gist.github.com/brettz9/4212217
+            var options = [].slice.call(d3.event.target.options);
+            values = options.filter(function (option) {
+                return option.selected;
+            }).map(function(option) {
+                return option.value;
+            });
+        }
+        // console.log(values);
         // check if only prompt option is selected
         if (values.length === 1 && values[0] === '') {
             values = null;

diff --git a/web/examples/select.html b/web/examples/select.html
@@ -7,6 +7,7 @@
 </head>
 <body>
 
+  <p>A meaningless example of multiple selectMenus on some random data...</p>
   <div id="select1">
     <div>
       <a class='reset'
@@ -101,7 +102,7 @@
   datatable
     .dimension(letterDimension2)
     .group(function(d) { return d.letter; })
-    .columns(['letter', 'color', 'state'])
+    .columns(['color', 'state'])
     .size(data.length);
 
   dc.renderAll();

diff --git a/web/js/dc.js b/web/js/dc.js
diff --git a/web/js/dc.js.map b/web/js/dc.js.map
diff --git a/web/js/dc.min.js b/web/js/dc.min.js
diff --git a/web/js/dc.min.js.map b/web/js/dc.min.js.map