Author: | rexshijaku |
---|---|
Views Total: | 786 views |
Official Page: | Go to website |
Last Update: | August 21, 2020 |
License: | MIT |
Preview:

Description:
Just another Vanilla JavaScript library to create conditional (also called chained or dependent) form fields on the web page.
The library has the ability to conditionally display form fields based on the values you selected in the previous ones.
Works with select dropdowns, checkboxes, and radio buttons.
How to use it:
1. Include the ChoiceFilter.js library on the page.
<script src="./js/choicefilter.js"></script>
2. Create 2 dependent select dropdowns.
<select id="language"> <option value="select-a-language">Select a language</option> <option value="all">All</option> <option value="js">JavaScript</option> <option value="css">CSS</option> </select> <select id="languages"> <option value="jq">jQuery</option> <option value="vanilla">Vanilla</option> <option value="css2">CSS2</option> <option value="css3">CSS3</option> </select>
3. Apply conditional logic to these select dropdowns.
var language = document.getElementById("language"); var languages = document.getElementById("languages"); language.filtchoices(languages, { data:{ "js": ["jq","vanilla"], "css": ["css2","css3"] }, showAllChildChoicesWhen: "all" });
4. All possible configuration options.
language.filtchoices(languages, { // fires an onChange event on init autoFilterOnInit : true, // when initialized fire onchange event // custom delimiter if your values are strings valueDelimiter: ",", // wrapper of a child choices wrapperSelector: null, // only data will be updated dataOnly: false, // exclude choices here independentChoices: [], // show all child choices with these values showAllChildChoicesWhen : [], // auto select these choices after filter autoSelectedChoicesAfterFilter : [], // choices which are in this array will // choices in child element which are present in every parent presentOnEveryParent : [], // // when parent has some value, it will show some elements specified by this selector parentControlsVisibilityOf : null, // ignore parent values ignoreParentValues : [] });