JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<select linker-source="sel1">
    <option value="op1">Option 1</option>
    <option value="op2">Option 2</option>
    <option>Valueless</option>
</select>
<select linker-source="sel2">
    <option value="op1">Another option 1</option>
    <option value="op2">Another option 2</option>
</select>
<div linker-reads="sel1" linker-needs="op1">This will only show up if option 1 is selected, in either box.  Also shows up for Valueless.</div>
<input linker-reads="sel1" linker-needs="op2" value="Option 2 is selected!" />
<div linker-reads="sel1" linker-needs="Valueless">Valueless!</div>

JavaScript

console.clear();
(function () {
    if (document.readyState !== "loading") runLinker();
    else document.addEventListener("DOMContentLoaded", runLinker);

    function runLinker() {
        var sources = document.querySelectorAll("[linker-source]");

        Array.prototype.forEach.call(sources, function (source) {
            source.addEventListener("change", updateLinks);
            updateLinks.call(source);
        });

        function updateLinks() {
            var linkId = this.getAttribute("linker-source");
            var value = this.value;
            var readers = document.querySelectorAll("[linker-reads=" + linkId + "]");
            Array.prototype.forEach.call(readers, function (reader) {
                var needs = reader.getAttribute("linker-needs");
                reader.style.display = needs === value ? "" : "none";
            });
        }
    }
})();