demos/13-live-updates.html

<!doctype HTML>
<html>
    <head>
        <title>Live Updates | EasyDropDown Demo</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

        <link href="./style.css" rel="stylesheet"/>
        <link id="theme-sheet" href="./themes/flax.css" rel="stylesheet"/>
        <link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAb1BMVEUAAABCiZtUyORUyORCiZtUyORCiZtUyORCiZtUyORUyORCiZtUyORCiZtUyOREkKNUyORUyORUyORCiZtUyORUyORCiZtUyORCiZtUyORCiZtDjaBFlalHma1KpbtLqcBOtM1QuNJSwNtTxN9UyOQlYZhqAAAAGnRSTlMAEBAgMDBAQFBQYHBwgICPj5+vv7/P39/v793jxf8AAACqSURBVHja1ZJdF4IgDIYnZaaVpWbKrCzl///GIokYH3btc/fuPBwGGywCQeH5HyEVyaxwAsHZjFDLfA4LfPXJeVBIVU4CQvHNDfMKNdO59Ak8NvLeI2Qkx45Q0NwwSxiO1oHSEq64ta8kwh2xjeymDeGBbyrn2bowdCg5+D4OpgYmNlQQmRJ6VLSRMzxZeKKmcscPYuzwx85ZIBA3NFnbKwg9Ei4jFTgsgRepVztePP0rPgAAAABJRU5ErkJggg==">

        <script src="./scripts/themeSwitcher.js"></script>
        <script src="./scripts/optionAdder.js"></script>
    </head>
    <body>
        <main class="main">
            <h2 class="sub-heading">EasyDropDown Demo</h2>

            <h1 class="heading">13. Live Updates</h1>

            <div class="demo-container">
                <select id="demo-select">
                    <option value="" data-placeholder>Select</option>
                </select>

                <button type="button" class="button" id="add-option">Add new option</button>
            </div>

            <div class="theme-switcher">
                <div class="theme-switcher-label">Theme:</div>

                <div class="theme-switcher-options">
                    <button type="button" data-theme="./themes/flax.css" class="active">Flax</button> |
                    <button type="button" data-theme="./themes/beanstalk.css">Beanstalk</button> |
                    <button type="button" data-theme="./themes/ivy.css">Ivy</button>
                </div>
            </div>
        </main>

        <footer class="footer">
            <a target="_blank" href="https://github.com/patrickkunka/easydropdown">EasyDropDown v4</a>
            <a target="_blank" href="https://www.kunkalabs.com">&copy; KunkaLabs Ltd</a>
        </footer>

        <script src="./easydropdown.js"></script>
        <script>
            easydropdown.all({
                behavior: {
                    liveUpdates: true
                }
            });
        </script>
    </body>
</html>