Thiết kế website giá rẻ

Question

        var temporarySelection = [];
        var temporarySelection_level1 = [];
        var temporarySelection_level2 = [];
        var temporarySelection_level3 = [];
        var startDateText = '';
        var endDateText = '';
        var selectedTextAward = '';
        var selectedTextOrg = '';
        var selectedTextPillar = '';
        var selectedTextLeader = '';
        var selectedTextTeam = '';
        var selectedDateOpt = '';
        let filterRequest = '';
        var pillars = [];
        let badgifyData = '';
        let pageHomeAward_filter = 1;
        // let jsonData = '';
        function formatState(state) {
            if (!state.id) {
                return state.text;
            }
            var selected = ($('#mySelect').val() || []).indexOf(state.id) !== -1;
            var $state = $(
                '<span><input type="checkbox" class="select2-checkbox"' + (selected ? ' checked' : '') + ' /><span class="select2-checkbox-label">' + state.text + '</span></span>'
            );
            return $state;
        }


        function formatSelection(selected) {
            return selected.text;
        }


        $(document).ready(function () {


            //get the csv for dropdown
       
            const select2Input = document.querySelector('.select2-container .select2-search input[type="search"]');
            if (select2Input) {
                select2Input.style.caretColor = 'transparent'; // Set caret color to transparent
            }
            $('#mySelect').select2({
                placeholder: "Select",
                templateResult: formatState,
                templateSelection: formatSelection,
                closeOnSelect: false,
                minimumResultsForSearch: -1,
                allowClear: false
            });

            // Event handler for opening the dropdown
            $('#mySelect').on('select2:open', function () {
                if (!$('.apply-button').length) {
                    $('.select2-dropdown').append(
                        '<div class="select2-footer">' +
                        '<button class="clear-button">Reset</button>' +
                        '<button class="cancel-button">Cancel</button>' +
                        '<button class="apply-button">Apply</button></div>'
                    );
                }

                // Event handler for Apply button click
                $('.apply-button').off('click').on('click', function (e) {
                    // Perform actions you need
                    $('#mySelect').select2('close'); // Close the dropdown after applying
                    // Example action:
                    temporarySelection = $('#mySelect').val() || [];
                    console.log("Applying selection: ", temporarySelection);
                });

                // Event handler for Clear button click
                $('.clear-button').off('click').on('click', function (e) {
                    // Perform actions you need
                    $('#mySelect').val(null).trigger('change'); // Clear selections
                    // Example action:
                    temporarySelection = [];
                    console.log("Clearing selections");
                });

                // Event handler for Cancel button click
                $('.cancel-button').off('click').on('click', function (e) {
                    // Perform actions you need
                    $('#mySelect').select2('close'); // Close the dropdown after cancelling
                    // Example action:
                    console.log("Cancelling");
                });
              

            });


            $('#mySelect').on('select2:select', function () {
                temporarySelection = $('#mySelect').val();
                console.log("tempsel", temporarySelection)
            });

            $('#mySelect').on('select2:unselect', function () {
                temporarySelection = $('#mySelect').val();
                console.log("tempUnsel", temporarySelection)
            });


        })

     

   

        function getFilterDataAward(pageNum_filter = pageHomeAward_filter) {


        }

        function clearAll() {

        }

      .block-container-component .img-background {
            background-color: #fff !important;
        }

        .select2-container select2-container--default select2-container--open {
            top: 150px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            display: block;
            padding-left: 8px;
            padding-right: 20px;
            padding-top: 4px;
            padding-bottom: 0px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .select2-container--default .select2-selection--multiple {
            background-color: white;
            border: 1px solid #aaa;
            border-radius: 4px;
            cursor: text;
            max-width: 300px;
            min-height: 40px;
            padding-bottom: 0px !important;
        }

        .select2-container--default .select2-selection--single {
            background-color: #fff;
            border: 1px solid #aaa;
            border-radius: 4px;
            min-height: 39px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #fff !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #e4e4e4;
            border: 1px solid #aaa;
            border-radius: 4px;
            cursor: default;
            float: left;
            margin-right: 5px;
            margin-top: 5px;
            padding: 0 4px;
        }

        .select2-container .select2-dropdown .select2-results__options .select2-results__option input {
            margin-right: 10px;
        }

        .select2-container .select2-dropdown .select2-results__options .select2-results__option .select2-checkbox-label {
            pointer-events: none;
        }

        .select2-container .select2-dropdown .select2-footer {
            padding: 5px;
            text-align: right;
            border-top: 1px solid #ddd;
        }

        .apply-button,
        .clear-button,
        .cancel-button,
        .apply-button-level1,
        .clear-button-level1,
        .cancel-button-level1,
        .apply-button-level2,
        .clear-button-level2,
        .cancel-button-level2,
        .apply-button-level3,
        .clear-button-level3,
        .cancel-button-level3,
        #apply-btn-date,
        #cancel-btn-date,
        #reset-btn-date {
            background-color: #0072dc;
            color: white;
            border-radius: 20px;
            min-width: 50px;
            border: none;
            padding: 5px 20px;
            margin-left: 5px;
            font-size: 14px;
            cursor: pointer;
        }

        #apply-btn-date {
            display: none;
        }

        .select2-search--dropdown {
            display: none;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            display: none !important;
        }

        .select2-container--default.select2-container--focus .select2-selection--multiple {
            background-color: #fff;
        }

        .select2-container .select2-dropdown .select2-results__options .select2-results__option input {
            margin-right: 10px;
            pointer-events: auto !important;
        }

        .select2-container .select2-dropdown .select2-results__options .select2-results__option {
            display: flex;
            align-items: center;
            pointer-events: none;
        }

        #select2-date-range-options-results>.select2-container .select2-dropdown .select2-results__options .select2-results__option {
            pointer-events: auto;
        }

        #select2-date-range-options-results>li {
            pointer-events: auto !important;
        }

        .dropdown-content {
            display: flex;
            justify-content: flex-start;
            z-index: 1;
            position: relative;
        }

        .select2-container--default .select2-results__option[aria-disabled=true] {
            color: #999;
            display: none !important;
        }

        #level1,
        #level2 #level3 {
            display: block;
        }

        #dropdown1,
        #dropdown2 {
            margin: 5px;
        }

        #dropdown2 {
            text-align: center;
        }

        #date-range-selector {
            margin: 6px;
            padding-bottom: 5px;
        }

        .datepicker {
            float: left;
            margin-right: 10px;
        }

        .ui-datepicker-inline {
            float: left;
            margin-right: 10px;
        }

        #level2 {
            display: none;
        }

        #level3 {
            display: none;
        }

        .select2-container .select2-search--inline {
            float: left;
            display: block;
        }


        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            cursor: default;
            padding-left: 2px;
            padding-right: 5px;
            font-size: 12px;
            position: relative;
            top: -2px;
        }

        #custom-range {
            z-index: 99999;
            position: absolute;
            display: none;
            background-color: #fff;
            padding: 10px 2px 5px 2px;
            border: 1px solid #000;
        }

        .hidden-important {
            display: none !important;
        }

        .flex-important {
            display: flex !important;
        }

        .drop-header-team {
            font-size: 14px;
            text-align: left;
            margin-left: 0px;
        }

        .drop-header-award {
            font-size: 14px;
        }

        .drop-header-date {
            font-size: 14px;
        }

        .select2-container--default .select2-selection--multiple {
            position: relative;
            caret-color: transparent !important;
        }

        .select2-container--default .select2-search--inline .select2-search__field {
            position: absolute;
        }

        #filter-by {
            padding: 10.0px 0.0px 0.0px 5.0px;
            font-size: 15.0px;
            font-weight: 700;

        }

        #clearall-btn {
            margin: 30px 10px 10px 10px;
            color: black;
            text-decoration: underline;
        }

        .drop-header-team {
            position: relative;
        }

        /* .tooltip-icon {
            position: absolute;
    top: 19%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 8px;
    color: #fff;
        }
        .tooltip-icon::after {
            content: "Customize your selection by Org, Pillar or Lead";
            position: absolute;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1;
            display: none;
            right: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%);
        }

        .tooltip-icon:hover::after {
            display: block;
        } */
        .select2-dropdown {
            z-index: 900;
        }

        /* 
        .loader-container {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%; */
        /* background-color: rgba(255, 255, 255, 0.7); */
        /* Semi-transparent white background */
        /* text-align: center;
        } */

        /* .loader {
            position: absolute;
            top: 50%;
            left: 50%;
            border: 4px solid #f3f3f3; */
        /* Light grey */
        /* border-top: 4px solid #3498db; */
        /* Blue */
        /* border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        } */

        /* @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        } */
        .selectedDateContainer {
            display: none;
            font-size: 12.5px;
            color: gray;
        }

        #view-all-button {
            display: none;
        }

        .select2-search__field {
            position: absolute;
            top: 3px;
        }

     <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- Include Select2 CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <!-- Include jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Include Select2 JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
    <script type="text/javascript"
        src="https://one.walmart.com/content/dam/us-wire-wm1/images/me@/health/health-plans/smart-pages/js/papaparse.min.js"></script>
    <div class="dropdown-content">
        <div id="dropdown1">
            <div class="drop-header-award">Award</div>
            <select id="mySelect" style="width: 300px;" multiple="multiple">
                <option value="1">Bravo</option>
                <option value="2">Impact</option>
                <option value="3">Excellence</option>
                <option value="4">Team Award</option>
                <!-- <option value="5">Service Award</option> -->
                <!-- <option value="6">Tech Fwd</option> -->
            </select>
        </div>
        <a id="clearall-btn" onclick="clearAll()">Clear all</a>
    </div>

I am using select2 jquery plugin to create dropdown,I have multiple dropdowns on my page. I want the dropdown to close only when clicked on apply cancel and reset button. i Dont want the dropdown to close when clicked anywhere else other than it.
Note: when testing on stackoverflow environment it is working as i require but not on chrome broswer.

Thiết kế website giá rẻ

Danh mục

Close select2 dropdown only when clicked on a button