mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-19 22:25:09 +02:00
Add example of adding items to single select box
This commit is contained in:
parent
304d0b4d5d
commit
e97f3e4649
23
index.html
23
index.html
|
@ -242,6 +242,14 @@
|
||||||
<option value="Vue">Vue</option>
|
<option value="Vue">Vue</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
<label for="choices-single-add-items">Add items if they don't exist</label>
|
||||||
|
<select class="form-control" name="choices-single-add-items" id="choices-single-add-items" placeholder="This is a placeholder">
|
||||||
|
<option value="React">England</option>
|
||||||
|
<option value="React">Wales</option>
|
||||||
|
<option value="React">Scotland</option>
|
||||||
|
<option value="React">Northern Ireland</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>
|
<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>
|
<label for="states">States</label>
|
||||||
<select class="form-control" name="states" id="states" placeholder="Choose a state">
|
<select class="form-control" name="states" id="states" placeholder="Choose a state">
|
||||||
|
@ -460,6 +468,11 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var singleAddItems = new Choices('#choices-single-add-items', {
|
||||||
|
addItems: true,
|
||||||
|
duplicateItems: false,
|
||||||
|
});
|
||||||
|
|
||||||
var customTemplates = new Choices(document.getElementById('choices-single-custom-templates'), {
|
var customTemplates = new Choices(document.getElementById('choices-single-custom-templates'), {
|
||||||
callbackOnCreateTemplates: function (strToEl) {
|
callbackOnCreateTemplates: function (strToEl) {
|
||||||
var classNames = this.config.classNames;
|
var classNames = this.config.classNames;
|
||||||
|
@ -498,6 +511,16 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var states = new Choices(document.getElementById('states'), {
|
||||||
|
callbackOnChange: function(value) {
|
||||||
|
if(value === 'New York') {
|
||||||
|
boroughs.enable();
|
||||||
|
} else {
|
||||||
|
boroughs.disable();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
var boroughs = new Choices(document.getElementById('boroughs')).disable();
|
var boroughs = new Choices(document.getElementById('boroughs')).disable();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue