Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown with Checkboxes</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content label {
            padding: 8px 16px;
            display: block;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>

<div class="dropdown">
    <button>Dropdown</button>
    <div class="dropdown-content">
        <label><input type="checkbox" value="Option 1" onclick="updateDiv(this)"> Option 1</label>
        <label><input type="checkbox" value="Option 2" onclick="updateDiv(this)"> Option 2</label>
        <label><input type="checkbox" value="Option 3" onclick="updateDiv(this)"> Option 3</label>
    </div>
</div>

<div id="outputDiv" style="margin-top: 20px;"></div>

<script>
    function updateDiv(checkbox) {
        var outputDiv = document.getElementById('outputDiv');
        var value = checkbox.value;

        // get list of product based on value from API

        if (checkbox.checked) {
            // * Add in list
            outputDiv.innerHTML += '<p>' + value + '</p>';
        } else {
            // * Remove
            var paragraphs = outputDiv.getElementsByTagName('p');
            for (var i = 0; i < paragraphs.length; i++) {
                if (paragraphs[i].innerText === value) {
                    outputDiv.removeChild(paragraphs[i]);
                    break;
                }
            }
        }
    }
</script>

</body>
</html>
Editor is loading...