mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 13:06:34 +02:00
Update example
This commit is contained in:
parent
0f64611057
commit
497ed50903
47
index.html
47
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>
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue