Create Chained Form Fields With ChoiceFilter.js

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 : [] 

});