deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-06-01 13:32:23 +02:00
Code Issues Projects Releases Wiki Activity

Update example

Browse source
This commit is contained in:
Josh Johnson 2017-12-08 15:22:51 +00:00
parent 0f64611057
commit 497ed50903
2 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
index.html
View file

@ -258,24 +258,26 @@
<option value="Vue">Vue</option> <option value="Vue">Vue</option>
</select> </select>
<p>Below is an example of how you could have two select inputs depend on eachother. 'Boroughs' will only be enabled if <p>
the value of 'States' is 'New York'</p> Below is an example of how you could have two select inputs depend on eachother. 'Tube stations' will only be enabled if
<label for="states">States</label> the value of 'Cities' is 'London'
<select class="form-control" name="states" id="states" placeholder="Choose a state"> </p>
<option value="Michigan">Michigan</option> <label for="cities">Cities</label>
<option value="Texas">Texas</option> <select class="form-control" name="cities" id="cities" placeholder="Choose a city">
<option value="Chicago">Chicago</option> <option value="Leeds">Leeds</option>
<option value="New York">New York</option> <option value="Manchester">Manchester</option>
<option value="Washington">Washington</option> <option value="London">London</option>
<option value="Sheffield">Sheffield</option>
<option value="Newcastle">Newcastle</option>
</select> </select>
<label for="boroughs">Boroughs</label> <label for="tube-stations">Tube stations</label>
<select class="form-control" name="boroughs" id="boroughs" placeholder="Choose a borough"> <select class="form-control" name="tube-stations" id="tube-stations" placeholder="Choose a tube station">
<option value="The Bronx">The Bronx</option> <option value="Moorgate">Moorgate</option>
<option value="Brooklyn">Brooklyn</option> <option value="St Pauls">St Pauls</option>
<option value="Manhattan">Manhattan</option> <option value="Old Street">Old Street</option>
<option value="Queens">Queens</option> <option value="Liverpool Street">Liverpool Street</option>
<option value="Staten Island">Staten Island</option> <option value="Kings Cross St. Pancras">Kings Cross St. Pancras</option>
</select> </select>
</div> </div>
</div> </div>
@ -474,13 +476,14 @@
shouldSort: false, 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) { cities.passedElement.addEventListener('change', function(e) {
if (e.detail.value === 'New York') { if (e.detail.value === 'London') {
boroughs.enable(); tubeStations.enable();
} else { } else {
boroughs.disable(); tubeStations.disable();
} }
}); });
@ -521,8 +524,6 @@
}; };
} }
}); });
var boroughs = new Choices(document.getElementById('boroughs')).disable();
}); });
</script> </script>

1
package.json
View file

@ -65,6 +65,7 @@
"dependencies": { "dependencies": {
"classnames": "^2.2.5", "classnames": "^2.2.5",
"fuse.js": "^2.2.2", "fuse.js": "^2.2.2",
"opn": "^5.1.0",
"redux": "^3.3.1" "redux": "^3.3.1"
}, },
"npmName": "choices.js", "npmName": "choices.js",