demos/15-callbacks.html

<!doctype HTML>
<html>
    <head>
        <title>Callbacks | 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>
    </head>
    <body>
        <main class="main">
            <h2 class="sub-heading">EasyDropDown Demo</h2>

            <h1 class="heading">15. Callbacks</h1>

            <div class="demo-container">
                <select id="test">
                    <option value="" data-placeholder>Select</option>
                    <option>Foo</option>
                    <option>Bar</option>
                    <option>Baz</option>
                </select>
            </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('#test', {
                callbacks: {
                    onOpen: function() {
                        console.log('open');
                    },
                    onClose: function() {
                        console.log('close');
                    },
                    onSelect: function(value) {
                        console.log('select', value);
                    },
                    onOptionClick: function(value) {
                        console.log('click option', value);
                    }
                }
            });
        </script>
    </body>
</html>