JSFiddle - React, Tailwind, and code Playground

by Nick Grealy

HTML

<script src="https://rawgit.com/nickgrealy/RulesEngineJS/master/src/dist/js/RulesEngine-dist.min.js"></script>
<label>Animal:</label>
<select id="control1">
    <option value="">-- Please Select --</option>
    <option value="catdog">cat & dog</option>
    <option value="dogcow">dog & cow</option>
    <option value="cowcat">cow & cat</option>
</select>
<div id="dogSection">dog!</div>
<div id="catSection">cat!</div>
<div id="cowSection">cow!</div>

CSS

body{font-family:verdana;}
#dogSection,#catSection,#cowSection{margin:10px 0px;display:none;padding:4px;}
#dogSection{border:1px solid brown;}
#catSection{border:1px solid black;}
#cowSection{border:1px dashed black;}

JavaScript

// function which takes a map of parameters, to their show/hide value
// e.g. inputs = {p_dogSection: 'show', p_catSection: 'hide'}
var showHideFn = function(inputs){
    Object.keys(inputs).forEach(function(key, i){
        if (inputs[key] == 'show'){
            $('#'+key).fadeIn('slow')    
        } else {
            $('#'+key).hide()
        }
    })
}

// the rules to evaluate against
var rules = [
    ['control1', 'p_dogSection', 'p_catSection', 'p_cowSection'],
    [''        , 'hide'        , 'hide'        , 'hide'        ],
    ['catdog'  , 'show'        , 'show'        , 'hide'        ],
    ['dogcow'  , 'show'        , 'hide'        , 'show'        ],
    ['cowcat'  , 'hide'        , 'show'        , 'show'        ]
]

// the rules engine, which will evaluate the rules
var rulesEngine = RulesEngine.build(rules, showHideFn, false)

// add onchange event to the select control, re-evaluate the rules engine onchange
$('#control1').change(function(el){
    var select = this
    var selectedValue = select.options[select.selectedIndex].value
    var rulesControls = {control1: selectedValue}
    rulesEngine.evaluate(rulesControls)
})