From 497ed5090360aa9b8c6c30b99520bb90b60fc858 Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@joshuajohnson.co.uk>
Date: Fri, 8 Dec 2017 15:22:51 +0000
Subject: [PATCH] Update example

---
 index.html   | 47 ++++++++++++++++++++++++-----------------------
 package.json |  1 +
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 7d0d2f8..862e539 100644
--- a/index.html
+++ b/index.html
@@ -258,24 +258,26 @@
         <option value="Vue">Vue</option>
       </select>
 
-      <p>Below is an example of how you could have two select inputs depend on eachother. 'Boroughs' will only be enabled if
-        the value of 'States' is 'New York'</p>
-      <label for="states">States</label>
-      <select class="form-control" name="states" id="states" placeholder="Choose a state">
-        <option value="Michigan">Michigan</option>
-        <option value="Texas">Texas</option>
-        <option value="Chicago">Chicago</option>
-        <option value="New York">New York</option>
-        <option value="Washington">Washington</option>
+      <p>
+        Below is an example of how you could have two select inputs depend on eachother. 'Tube stations' will only be enabled if
+        the value of 'Cities' is 'London'
+      </p>
+      <label for="cities">Cities</label>
+      <select class="form-control" name="cities" id="cities" placeholder="Choose a city">
+        <option value="Leeds">Leeds</option>
+        <option value="Manchester">Manchester</option>
+        <option value="London">London</option>
+        <option value="Sheffield">Sheffield</option>
+        <option value="Newcastle">Newcastle</option>
       </select>
 
-      <label for="boroughs">Boroughs</label>
-      <select class="form-control" name="boroughs" id="boroughs" placeholder="Choose a borough">
-        <option value="The Bronx">The Bronx</option>
-        <option value="Brooklyn">Brooklyn</option>
-        <option value="Manhattan">Manhattan</option>
-        <option value="Queens">Queens</option>
-        <option value="Staten Island">Staten Island</option>
+      <label for="tube-stations">Tube stations</label>
+      <select class="form-control" name="tube-stations" id="tube-stations" placeholder="Choose a tube station">
+        <option value="Moorgate">Moorgate</option>
+        <option value="St Pauls">St Pauls</option>
+        <option value="Old Street">Old Street</option>
+        <option value="Liverpool Street">Liverpool Street</option>
+        <option value="Kings Cross St. Pancras">Kings Cross St. Pancras</option>
       </select>
     </div>
   </div>
@@ -474,13 +476,14 @@
         shouldSort: false,
       });
 
-      var states = new Choices(document.getElementById('states'));
+      var cities = new Choices(document.getElementById('cities'));
+      var tubeStations = new Choices(document.getElementById('tube-stations')).disable();
 
-      states.passedElement.addEventListener('change', function(e) {
-        if (e.detail.value === 'New York') {
-          boroughs.enable();
+      cities.passedElement.addEventListener('change', function(e) {
+        if (e.detail.value === 'London') {
+          tubeStations.enable();
         } else {
-          boroughs.disable();
+          tubeStations.disable();
         }
       });
 
@@ -521,8 +524,6 @@
           };
         }
       });
-
-      var boroughs = new Choices(document.getElementById('boroughs')).disable();
     });
   </script>
 
diff --git a/package.json b/package.json
index ebaec2d..c12bfe1 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "fuse.js": "^2.2.2",
+    "opn": "^5.1.0",
     "redux": "^3.3.1"
   },
   "npmName": "choices.js",