This JavaScript solution addresses an issue with dropdown select fields in Ninja Tables' frontend editing interface. It replaces the default Select Field with a custom modal that allows users to select multiple options more effectively. The script hides the original select field and displays a custom input field with selected options, resolving …

Custom Dropdown for Ninja Tables: Frontend Editing Enhancement.js

// Custom Dropdown CSS
/*
/* Hidden select field */
.nt_input_YourColumnKey_a,.nt_input_YourColumnKey_b {
    display: none; /* Hide the original select field */
}
/* Custom dropdown trigger (input field) */
.custom-dropdown-trigger {
    display: inline-block;
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    background-color: #f8f9fa;
    color: #333;
    box-sizing: border-box; /* Ensure padding and border are included in width */
}

/* Placeholder style */
.custom-dropdown-trigger::placeholder {
    color: #888;
}

/* Custom dropdown styles */
.custom-dropdown-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999999; /* Ensure it is above all elements */
}

.custom-dropdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 99999999; /* Ensure it is above all elements */
}

.custom-dropdown .options-container {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.custom-dropdown .option-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.custom-dropdown .option-item input[type="checkbox"] {
    margin-right: 10px;
}

.custom-dropdown .button-container {
    text-align: right;
}

.custom-dropdown .button-container a {
    display: inline-block;
    padding: 10px 20px;
    margin-left: 10px;
    text-decoration: none;
    color: white;
    background-color: #007bff;
    border-radius: 4px;
}

.custom-dropdown .button-container a.cancel {
    background-color: #6c757d;
}
*/

// Custom Dropdown jQuery
jQuery(document).ready(function($) {
    const nt_select_columnKey = 'nt_input_YourColumnKey_a,nt_input_YourColumnKey_b'; // Define target column keys

    // Append modal HTML to the body
    $('body').append(`
        <div class="custom-dropdown-overlay">
            <div class="custom-dropdown">
                <div class="options-container"></div>
                <div class="button-container">
                    <a href="#" class="ok">OK</a>
                    <a href="#" class="cancel">Cancel</a>
                </div>
            </div>
        </div>
    `);

    function openDropdown(trigger, select) {
        const overlay = $('.custom-dropdown-overlay');
        const optionsContainer = overlay.find('.options-container');
        
        // Clear previous options and add new ones
        optionsContainer.empty();
        select.find('option').each(function() {
            const option = $(this);
            if (option.val() !== '') {
                optionsContainer.append(`
                    <div class="option-item">
                        <input type="checkbox" value="${option.val()}" ${option.prop('selected') ? 'checked' : ''}>
                        <label>${option.text()}</label>
                    </div>
                `);
            }
        });

        // Show the modal
        overlay.fadeIn();

        // OK button action
        overlay.find('.ok').off('click').on('click', function(e) {
            e.preventDefault();
            const selectedValues = optionsContainer.find('input:checked').map(function() {
                return $(this).val();
            }).get();
            select.val(selectedValues).change(); // Update select field
            trigger.val(selectedValues.join(', ') || 'Select'); // Update trigger value
            overlay.fadeOut(); // Hide modal
        });

        // Cancel button action
        overlay.find('.cancel').off('click').on('click', function(e) {
            e.preventDefault();
            overlay.fadeOut(); // Hide modal
        });

        // Hide modal on overlay click
        overlay.off('click').on('click', function(e) {
            if ($(e.target).is('.custom-dropdown-overlay')) {
                overlay.fadeOut();
            }
        });
    }

    function initializeDropdownControl(control) {
        const select = control.find('.nt_form_input');
        const classList = select.attr('class').split(' ');
        const columnKey = classList.find(cls => nt_select_columnKey.includes(cls));

        if (select.attr('multiple') && columnKey) {
            const trigger = control.find('.custom-dropdown-trigger');
            // Update trigger field with selected values if any
            const selectedValues = select.val() || [];
            trigger.val(selectedValues.join(', ') || 'Select');
            
            control.prepend('<input type="text" class="custom-dropdown-trigger" placeholder="Select options" readonly>');
        }
    }

    // Click event to open the custom dropdown
    $('.nt_form_control').on('click', function() {
        const select = $(this).find('.nt_form_input');
        const classList = select.attr('class').split(' ');
        const columnKey = classList.find(cls => nt_select_columnKey.includes(cls));

        if (select.attr('multiple') && columnKey) {
            const trigger = $(this).find('.custom-dropdown-trigger');
            openDropdown(trigger, select);
        }
    });

    // Initialize the custom dropdown trigger for each select field with the column key class
    $('.nt_form_control').each(function() {
        initializeDropdownControl($(this));
    });
});