docs(select): Remove old API usage from README; update demo (#2516)

material-components · Apr 5, 2018 · 91dc0e0 · 91dc0e0
1 parent 6d70afc
commit 91dc0e0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 24 deletions.
diff --git a/demos/select.html b/demos/select.html
@@ -237,31 +237,27 @@ <h2 class="mdc-typography--title">MDC Select with optgroups</h2>
         mdc.select.MDCSelect.attachTo(document.getElementById('optgroup-js-select'));
 
         var root = document.getElementById('js-select');
-        var nativeSelect = root.querySelector('.mdc-select__native-control');
-        var boxCurrentlySelected = document.getElementById('currently-selected');
+        var currentlySelected = document.getElementById('currently-selected');
         var select = new mdc.select.MDCSelect(root);
-        var boxDemoWrapper = document.getElementById('demo-wrapper');
+        var demoWrapper = document.getElementById('demo-wrapper');
         var rtlCb = document.getElementById('rtl');
         var alternateColorsCb = document.getElementById('alternate-colors');
         var disabledCb = document.getElementById('disabled');
         var setSelectedButton = document.getElementById('set-selected-index-zero-button');
         var setValueMeatButton = document.getElementById('set-value-meat-button');
         function updateSelectedTextContent() {
-          var item = nativeSelect.selectedOptions[0];
-          var index = nativeSelect.selectedIndex;
-          if (item) {
-            boxCurrentlySelected.textContent = '"' + item.textContent + '" at index ' + index +
-              ' with value "' + nativeSelect.value + '"';
-          }
+          var value = select.value;
+          var index = select.selectedIndex;
+          currentlySelected.textContent = value ? value + ' at index ' + index : '(none)';
         }
         root.addEventListener('change', function() {
           updateSelectedTextContent();
         });
         rtlCb.addEventListener('change', function() {
           if (rtlCb.checked) {
-            boxDemoWrapper.setAttribute('dir', 'rtl');
+            demoWrapper.setAttribute('dir', 'rtl');
           } else {
-            boxDemoWrapper.removeAttribute('dir');
+            demoWrapper.removeAttribute('dir');
           }
         });
         alternateColorsCb.addEventListener('change', function() {
@@ -282,31 +278,27 @@ <h2 class="mdc-typography--title">MDC Select with optgroups</h2>
 
       demoReady(function() {
         var root = document.getElementById('box-js-select');
-        var nativeSelect = root.querySelector('.mdc-select__native-control');
-        var boxCurrentlySelected = document.getElementById('box-currently-selected');
+        var currentlySelected = document.getElementById('box-currently-selected');
         var select = new mdc.select.MDCSelect(root);
-        var boxDemoWrapper = document.getElementById('box-demo-wrapper');
+        var demoWrapper = document.getElementById('box-demo-wrapper');
         var rtlCb = document.getElementById('box-rtl');
         var alternateColorsCb = document.getElementById('box-alternate-colors');
         var disabledCb = document.getElementById('box-disabled');
         var setSelectedButton = document.getElementById('box-set-selected-index-zero-button');
         var setValueFruitRollUpsButton = document.getElementById('box-set-value-fruit-roll-up-button');
         function updateSelectedTextContent() {
-          var item = nativeSelect.selectedOptions[0];
-          var index = nativeSelect.selectedIndex;
-          if (item) {
-            boxCurrentlySelected.textContent = '"' + item.textContent + '" at index ' + index +
-              ' with value "' + nativeSelect.value + '"';
-          }
+          var value = select.value;
+          var index = select.selectedIndex;
+          currentlySelected.textContent = value ? value + ' at index ' + index : '(none)';
         }
         root.addEventListener('change', function() {
           updateSelectedTextContent();
         });
         rtlCb.addEventListener('change', function() {
           if (rtlCb.checked) {
-            boxDemoWrapper.setAttribute('dir', 'rtl');
+            demoWrapper.setAttribute('dir', 'rtl');
           } else {
-            boxDemoWrapper.removeAttribute('dir');
+            demoWrapper.removeAttribute('dir');
           }
         });
         alternateColorsCb.addEventListener('change', function() {

diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
@@ -63,8 +63,7 @@ Then with JS
 ```js
 const select = new mdc.select.MDCSelect(document.querySelector('.mdc-select'));
 select.listen('change', () => {
-  alert(`Selected "${select.selectedOptions[0].textContent}" at index ${select.selectedIndex} ` +
-        `with value "${select.value}"`);
+  alert(`Selected option at index ${select.selectedIndex} with value "${select.value}"`);
 });
 ```